带Bootstrap 4的多行导航栏，品牌图像位于导航上方 [英] Multi-Row Navbar with Bootstrap 4 with brand-image centered above nav

问题描述

好的，我已经找到了创建多行导航栏的方法，但是我正在尝试一些不同的方法.这是我要创建的内容:

Ok, I have found how to create multi row navbars but I'm trying something a little different. Here is what I'm trying to create:

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

然后将在移动设备上变为:

which will then become this for mobile devices:

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

访问导航栏切换器时，仅显示导航链接.

when accessing the navbar-toggler, only the nav-links appear.

这是我尝试过的，来自bootstrap 3解决方案:

Here is what I've tried, coming from a bootstrap 3 solution:

导航栏:

.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

谢谢！

推荐答案

您可以将2个导航栏与1个切换器一起使用.将品牌，地址，电话放在第一个导航栏中，并将链接放在第二个导航栏中.然后从第一个使用切换器，并定位包含链接的第二个navbar-nav.使用实用程序类根据需要对齐项目.

You could use 2 navbars with 1 toggler. Put the Brand, Address, Phone in the first navbar, and Links in the 2nd navbar. Then use the toggler from the first and target the 2nd navbar-nav that contains the links. Use the 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的多行导航栏，品牌图像位于导航上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！