Question

好的，我已经找到了如何创建多行导航栏，但我正在尝试一些不同的东西。以下是我要创建的内容：

-----------------------------------------------------
address             brand-image                 phone
-----------------------------------------------------
     nav-link | nav-link | nav-link | nav-link
-----------------------------------------------------

这将成为移动设备的一部分：

-----------------------------------------------------
brand-image                            navbar-toggler
-----------------------------------------------------

访问导航栏切换器时，只显示导航链接。

以下是我尝试过的，来自bootstrap 3解决方案：

导航栏：

.navbar-brand {
    font-size: 200%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

@media (min-width: 768px) {
.navbar-brand,
.navbar-nav li a {
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.navbar-nav li {
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.navbar-brand {
    font-size: 300%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.navbar {
    background-color: #ZZZZZ;
}

@media (min-width: 768px) {
  .navbar-nav.navbar-center, .navbar-header-center {
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="navbar-header navbar-header-center">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="clearfix"></div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav navbar-center">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
    </ul>
  </div>
</nav>

https://www.bootply.com/LDZbYHJrc7

谢谢！

Answer 1

您可以使用2个导航栏和1个切换器。将品牌，地址，电话放在第一个导航栏中，将链接放在第二个导航栏中。然后使用第一个切换器并定位包含链接的第二个navbar-nav。使用utility class to align items as needed。

<nav class="navbar navbar-expand-md navbar-light bg-light flex-row">
    <span class="navbar-text d-none d-md-block">Address</span>
    <a class="navbar-brand mx-md-auto mr-auto" href="/">
        Brand
    </a>
    <span class="navbar-text d-none d-md-block">Phone</span>
    <button class="navbar-toggler ml-lg-0" type="button" data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
<nav class="navbar navbar-expand-md navbar-lightp-0">
    <div class="collapse navbar-collapse bg-light px-3" id="navbarContent">
        <ul class="navbar-nav mx-md-auto mx-0 w-50 align-items-start nav-fill">
            <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>
            <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>
</nav>

https://www.codeply.com/go/sSfPlgSMCI

带有Bootstrap 4的多行导航栏，品牌图像位于导航上方

1 个答案: