带 2 行的 Bootstrap 4 导航栏

Posted

技术标签:

【中文标题】带 2 行的 Bootstrap 4 导航栏【英文标题】:Bootstrap 4 navbar with 2 rows 【发布时间】:2017-07-26 21:12:30 【问题描述】:

我使用 Bootstrap 4 alpha 6 创建了一个导航栏,左侧有一个大品牌/图标,图标右侧有 2 个导航栏导航。一个导航有链接,另一个导航有图标。它完全按照我的意愿工作,除了一件事。

我希望 2 个导航栏出现在图标右侧的 2 个单独的行中。像这样:

------------------------------------------------------
               link link link link  
brand-icon -------------------------------------------
               icon icon icon
------------------------------------------------------

移动版仍会像现在一样垂直显示链接。我用 flexbox 尝试了几种不同的方法,但无法让它工作。

这是我的代码:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
        <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Events</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

【问题讨论】:

【参考方案1】:

您可以使用flex-column flexbox 实用程序类将 2 个导航垂直堆叠在图标旁边。这会将flex-direction: column 设置在navbar-collapse div 上,以便它的子元素垂直堆叠。

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1>
        <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Events</a>
                </li>
            </ul>
            <ul class="navbar-nav flex-row mb-2">
                <li class="nav-item">
                    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Demo - Bootstrap 4 navbar with 2 rows


这是另一种 2 行和 对齐搜索表单的变体:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand my-auto" href="#">Brand</a>
    <div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
        <ul class="navbar-nav ml-auto small">
            <li class="nav-item active">
                <a class="nav-link" href="#">Shop</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Events</a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            ...
        </form>
    </div>
</nav>

Demo - Navbar with 2 rows on right


Bootstrap 4.0.0 更新:https://www.codeply.com/go/05hEHoiUvv

这是2 navbars with one mobile toggler 的替代方案


Bootstrap 4.0 - Two NavBars that collapse into one toggleHow can I have Brand and Navbar on separate lines?How move 'nav' element under 'navbar-brand' in my NavbarHow to place navbar below sticky navbar using bootstrap 4?Bootstrap 4 Multiple fixed-top navbars

【讨论】:

第二个 Codeply 的第二个菜单(社交媒体)有什么办法可以占据中/大屏幕的整个宽度?我已经尽我所能,但没有成功。 如果你有一个固定的导航栏 - 你怎么有两个栏? 【参考方案2】:

对我来说,“2 行右对齐的变体”没有右对齐 Safari 中的行。我将无序列表放在一个带有flex-columnml-auto 类的新div 中。

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
      <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
      <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
      <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
        <div class="flex-column ml-auto">
          <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Product</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
          </ul>
          <ul class="navbar-nav">
            <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
            <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
            <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

【讨论】:

这是一个问题还是一个答案? @Christoph 两个,我猜。【参考方案3】:
<template>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
   
    <a class="navbar-brand col-lg-1" href="#">
      <img src="../assets/logo.png"    class="d-inline-block align-text-top">
      SMS-WEB
    </a>
    <!--me-auto mb-2 mb-lg-0 -->
   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
      <ul class="navbar-nav col-lg-12 " >
        <li class="nav-item col-lg-8">
    <app-searchbox class=""></app-searchbox>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button></li>
        <li class="nav-item " style="display:inline-flex;">
         <span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">

         <fa icon="user" class=""/></span>
         <div style="display:block">
         <div class="row-1  " style="font-size:13px">
          <a class="nav-link active p-0"  href="#">Hello, Sign in</a>
         </div>
         <div class="row-2" style="font-size:15px"><span>My Account</span></div>
         </div>

         
        </li>
        <li class="nav-item ">
         <span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">

         <fa icon="heart" class=""/></span>
         

         
        </li>

        <li class="nav-item " style="display:inline-flex;" id="nav-cart" >
         <span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2  text-wrap rounded-circle" >

         <fa :icon="['fas', 'cart-plus']"></fa></span>
         <div style="display:block">
         <div class="row-1" style="font-size:13px">
          <a class="nav-link active p-0"  href="#">My cart</a>
         </div>
         <div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
         
         </div>
         </div>
         <app-dropcart id="drop-cart"/>
        </li>
      </ul>
       

        <ul class="navbar-nav flex-row mb-2 col-lg-12" >
                <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
            </ul>
  
</div>
    </div>
  </nav>


</template>

<script>
import searchbox from '@/components/search.vue'
import dropCart from '@/components/drop-cart.vue'
export default 
  name: 'navbar',
  props: 
    msg: String
  ,
  components: 
    'app-searchbox':searchbox,
    'app-dropcart':dropCart
  

</script>
<style lang="sass">


</style>




    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
       
        <a class="navbar-brand col-lg-1" href="#">
          <img src="../assets/logo.png"    class="d-inline-block align-text-top">
          SMS-WEB
        </a>
        <!--me-auto mb-2 mb-lg-0 -->
       <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
          <ul class="navbar-nav col-lg-12 " >
            <li class="nav-item col-lg-8">
      <div class="container ">
         <form class="d-flex">
            <input class="form-control rounded-0 ml-5" type="search" placeholder="Search  product here..." aria-label="Search">
            <button class="btn btn-outline-success rounded-0" type="submit">Search</button>
          </form>
    </div>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button></li>
            <li class="nav-item " style="display:inline-flex;">
             <span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
    <i class="fas fa-cart-plus"></i></span>
             <div style="display:block">
             <div class="row-1  " style="font-size:13px">
              <a class="nav-link active p-0"  href="#">Hello, Sign in</a>
             </div>
             <div class="row-2" style="font-size:15px"><span>My Account</span></div>
             </div>

             
            </li>
            <li class="nav-item ">
             <span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">

           <i class="fas fa-cart-plus"></i></span>
             

             
            </li>

            <li class="nav-item " style="display:inline-flex;" id="nav-cart" >
             <span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2  text-wrap rounded-circle" >

             <fa :icon="['fas', 'cart-plus']"></fa></span>
             <div style="display:block">
             <div class="row-1" style="font-size:13px">
              <a class="nav-link active p-0"  href="#">My cart</a>
             </div>
             <div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
             
             </div>
             </div>
             <app-dropcart id="drop-cart"/>
            </li>
          </ul>
           

            <ul class="navbar-nav flex-row mb-2 col-lg-12" >
                    <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
                </ul>
      
    </div>
        </div>
      </nav>


    <!-- help http://wa.me/+94711308100 -->

【讨论】:

请在您的回答中提供更多详细信息。正如目前所写的那样,很难理解您的解决方案。

以上是关于带 2 行的 Bootstrap 4 导航栏的主要内容,如果未能解决你的问题,请参考以下文章

javascript 带滚动间谍的Bootstrap 4导航栏

Bootstrap 4 float-right 不适用于导航栏[重复]

在不换行的情况下创建 Bootstrap 3 Navbar 的最佳方法(并且不折叠)

关于 Bootstrap 4 - 导航栏顶部放置

JavaScript - Bootstrap 4 - 仅在折叠时隐藏导航栏

导航栏元素在滚动时处于活动状态