Bootstrap 4导航栏，带有品牌中心和左侧，中心和右侧的链接[重复]

Posted

技术标签:

【中文标题】Bootstrap 4导航栏，带有品牌中心和左侧，中心和右侧的链接[重复]【英文标题】：Bootstrap 4 navbar with brand center and links on the left, center and right [duplicate] 【发布时间】：2019-03-20 12:11:33 【问题描述】：

我想创建一个导航栏，其中品牌位于中心，链接位于中心、左侧和右侧。就像本站使用的一样：https://www.clarks.es/

目前，我有下一个导航栏，但我还需要中心的链接。

<nav class="navbar navbar-dark navbar-expand-md bg-success justify-content-between">
  <div class="container-fluid">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
      <ul class="navbar-nav">
        <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>

    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Brand</a>

    <div class="navbar-collapse collapse dual-nav w-50 order-2">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="">Link 1</a></li>
        <li class="nav-item"><a class="nav-link" href="">Link 2</a></li>
      </ul>
    </div>

  </div>
</nav>

【问题讨论】：

这已经是answered here。使用副本中解释的方法：codeply.com/go/a6OeSIHdLK 【参考方案1】：

这是我关于如何实现您想要的菜单的想法。请注意，边框类只是为了视觉测试而添加的，它们可以被删除。希望对您有所帮助。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark navbar-expand-md bg-success">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse dual-nav order-1 order-md-0">
    <ul class="navbar-nav border border-primary">
      <li class="nav-item">
        <a class="nav-link" href="#">Left Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left Link</a>
      </li>
    </ul>
  </div>

  <div class="navbar-collapse collapse dual-nav order-2 order-md-1 justify-content-end">
    <ul class="navbar-nav border border-danger">
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
    </ul>
  </div>

  <a href="/" class="navbar-brand mx-auto order-0 order-md-2 p-2">Brand</a>

  <div class="navbar-collapse collapse dual-nav order-3 order-md-3">
    <ul class="navbar-nav border border-danger">
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
    </ul>
  </div>

  <div class="navbar-collapse collapse dual-nav order-4 order-md-4 justify-content-end">
    <ul class="navbar-nav border border-primary">
      <li class="nav-item">
        <a class="nav-link" href="#">Right Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Right Link</a>
      </li>
    </ul>
  </div>

</nav>

这个navbar 的结构主要使用Bootstrap 4 的下一个实用程序：

Flex Order Flex Justify Content Horizontal Centering

【讨论】：

感谢您的帮助！！ @D.Smania 这里要注意，这取决于菜单项的数量相同，并且导航的宽度相同。如果左对齐的导航有四个项目，而右对齐的导航有三个，则居中的元素将不在中心。【参考方案2】： 
***Try below code you will get what exactly you want***

    .navigation-container .navigation-header 
    padding: 25px 0 0;
    position: relative;


.width100 
    width: 100%;
    position: relative;
    float: left;


.navigation-container .search-btn 
    background-image: url(https://s7g10.scene7.com/is/image/Pangaea2Build/IC%5FSearch?$Original$);
    background-position: center center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-top: 8px;
    position: absolute;
    left: 0;
    background-size: 100%;
    z-index: 1;

.pull-left 
    float: left !important;


.visuallyhidden 
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;


.navigation-container .search-btn 
    background-image: url(https://s7g10.scene7.com/is/image/Pangaea2Build/IC%5FSearch?$Original$);
    background-position: center center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-top: 8px;
    position: absolute;
    left: 0;
    background-size: 100%;
    z-index: 1;


.navigation-container .navbar 
    width: 100%;

.pull-left 
    float: left !important;

.text-center 
    text-align: center;


.navigation-container .navbar .desktop-nav-bar 
    margin: 0;
    height: 63px;
    padding: 0 32px;
    overflow: hidden;


.navigation-container .navbar > div div 
    display: inline-block;

.nav-left 
    position: absolute;
    right: 50%;
    padding-right: 93px;




main-links 
    letter-spacing: 2px;

.navigation-container .navbar .nav-main-links 
    padding: 11px 35px 0;

.navigation-container .navbar .nav-main-links 
    display: inline-block;
    padding: 11px 20px 0;
    vertical-align: top;

.navigation-container .navbar > div div 
    display: inline-block;



.navigation-container .navbar > div div 
    display: inline-block;

.width100 
    width: 100%;
    position: relative;
    float: left;



.navigation-container .navbar .nav-main-links a 
    color: #595959;

.navigation-container .navbar .nav-main-links a 
    color: #767676;
    text-transform: uppercase;
    background-image: none !important;
    margin-bottom: 35px;


.navigation-container .navbar .nav-main-links 
    letter-spacing: 2px;

.navigation-container .navbar .nav-main-links 
    padding: 11px 35px 0;

.navigation-container .navbar .nav-main-links 
    display: inline-block;
    padding: 11px 20px 0;
    vertical-align: top;

.navigation-container .navbar > div div 
    display: inline-block;


.width100 
    width: 100%;
    position: relative;
    float: left;


.navigation-container .navbar .logo-item 
    padding: 0px 30px;
    vertical-align: top;
    position: relative;
    z-index: 1;

.navigation-container .navbar > div div 
    display: inline-block;





.navigation-container .navbar > div div 
    display: inline-block;




.site-logo 
    display: inline-block;
    margin-top: 2px;


.navigation-container .navbar .logo-item .logo 
    margin: 0;
    max-width: 111px;


.navigation-container .navbar > div div 
    display: inline-block;

.nav-right 
    position: absolute;
    left: 50%;
    padding-left: 93px;



.nav-main-links 
    letter-spacing: 2px;

.navigation-container .navbar .nav-main-links 
    padding: 11px 35px 0;

.navigation-container .navbar .nav-main-links 
    display: inline-block;
    padding: 11px 20px 0;
    vertical-align: top;

.navigation-container .navbar > div div 
    display: inline-block;



.navigation-container .navbar > div div 
    display: inline-block;

.width100 
    width: 100%;
    position: relative;
    float: left;

navigation-container .navbar .nav-main-links a 
    color: #595959;

.navigation-container .navbar .nav-main-links a 
    color: #767676;
    text-transform: uppercase;
    background-image: none !important;
    margin-bottom: 35px;


.navigation-container .mini-bag 
    z-index: 101;
    background-image: url(https://s7g10.scene7.com/is/image/Pangaea2Build/IC%5FMiniCartBag?$Original$);
    background-position: center right;
    background-repeat: no-repeat;
    height: 20px;
    background-size: 20px;
    width: 31px;
    cursor: pointer;
    margin-top: 9px;
    margin-right: 3px;
    position: absolute;
    right: 0;

.pull-right 
    float: right !important;


.navigation-container .mini-bag span.mini-cart-count 
    color: #333;
    display: inline-block;
    text-align: right;
    font-size: 12px;
    vertical-align: top;
    position: relative;
    top: -5px;
    right: -1px;





    <div class="navigation-container width100 grey-border">
        <div class="wrapper">
            <div class="navigation-header width100 hidden-xs hidden-sm">
                <a href="#" class="search-btn js-search-btn pull-left" role="button" tabindex="0">
                    <span class="visuallyhidden">Buscar</span>
                </a>

                <div class="navbar text-center pull-left">
                    <div id="desktop-nav-bar" class="desktop-nav-bar">
                        <div class="nav-left">
                            <div class="nav-main-links" id="navbar-item-0">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/womens" role="link">Mujer</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                            <div class="nav-main-links" id="navbar-item-1">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/mens" role="link">Hombre</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="logo-item">
                            <div class="js-mega-menu-item" id="desktop-nav-logo">
                                <a href="/" rel="tag" role="link" class="js-site-logo site-logo">
                                    <img src="https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Clarks_Header_Logo?$Original$"
                                        class="img js-image-responsive logo" >
                                </a>
                            </div>
                        </div>
                        <div class="nav-right">
                            <div class="nav-main-links" id="navbar-item-2">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/calzado-ninos" role="link">Niños</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                            <div class="nav-main-links" id="navbar-item-3">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/originals" role="link">Originals</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                            <div class="nav-main-links" id="navbar-item-4">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator no-children">
                                    <a href="/New-Arrivals/c/320" role="link">novedades</a></div>
                                <div class="nav-pointer"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="/cart" class="pull-right mini-bag js-mini-bag" role="link">
                    <span class="js-mini-cart-count mini-cart-count">0</span>
                    <span class="js-mini-cart-count-text" hidden="">0 Artículos en tu cesta de compra</span>
                </a>
            </div>
            <div class="mini-bag-pos">
                <div class="mini-bag-container pull-right js-mini-bag-data" data-tablet-moveto="#mobile-header-data" style="display: none;">
                    <div class="upward-arrow hidden-xs"></div>
                    <div class="mini-bag-cotent width100">
                        <a href="/cart" class="mini-cart-link js-mini-cart-link" data-mini-cart-url="/cart/rollover/minicart"
                            data-mini-cart-refresh-url="/cart/minicart/SUBTOTAL" data-mini-cart-name="CESTA"
                            data-mini-cart-empty-name="Tu cesta está vacía" role="link">
                        </a>

                        <input id="miniBagTimer" type="hidden" value="3000">

                        <div class="mini-bag-header width100">
                            <div class="width100">
                                <div class="pull-left">
                                    <span>MÉTODOS Y COSTES DE ENVÍO</span><span class="get-expand js-get-expand">+</span>
                                </div>
                                <div class="bill-amount pull-right">
                                    <span class="mini-cart-price js-mini-cart-price">0,00 €</span>
                                </div>
                            </div>

                            <div class="expanded-content width100 js-expanded-content">
                            </div>

                        </div>
                        <div class="mini-cart-container js-mini-cart-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

【讨论】：

以上是关于Bootstrap 4导航栏，带有品牌中心和左侧，中心和右侧的链接[重复]的主要内容，如果未能解决你的问题，请参考以下文章

带 2 行的 Bootstrap 4 导航栏

带有徽标或品牌名称文本的 Bootstrap 完全响应式导航栏

Bootstrap 导航栏中的左侧徽标和居中标题

Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单

如何创建带有 2 个折叠菜单的导航栏？ [复制]

bootstrap 4 导航栏在左侧和右侧有填充