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

Question

我想创建一个导航栏，其中品牌位于中心，链接位于中心、左侧和右侧。就像本站使用的一样：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>

Answer 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

Answer 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" alt="Clarks">
                                </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>