Bootstrap 桌面上有 2 行链接的导航

Question

我需要创建一个包含 2 行链接的响应式导航。我更愿意使用 bootstrap，因为它已经在网站上使用了。任何帮助我指明正确方向的帮助将不胜感激！

Answer 1

只需创建如下内容：

<nav>
  <div class="container">
    <div class="row">
      <div class="col-md-*">
      </div>
    </div>
    <div class="row">
      <div class="col-md-*">
      </div>
    </div>
  </div>
</nav>

也可以看看 bootstrap 的文档。这是 link to Bootstrap's site

Answer 2

你需要花点时间看看Bootstrap Navbar section also spend some time hacking around the examples，你很快就会掌握窍门的。

如果您想要大而深的菜单，请查看 Yamm (yet another mega dropdown menu) 或类似内容。那里有很多搜索 bootstrap 菜单或下拉菜单...但基本导航非常灵活。

Answer 3

搜索了几个小时后，我找到了几个不同的来源，最终帮助我弄明白了。

这是我的代码最终的样子。虽然还不完美，但已经差不多了。

谢谢大家！

#nav-div { /*This is the div that wraps the entire logo and nav content*/
 width:100%;
 position: fixed;
 top:0;
 left:0;
 z-index: 10;
 margin: 0;
 padding:0;
}

#nav-wrapper { /*This is the div that sizes the nav down to a col-md-9*/
 padding:0;
 margin:0;
}

#nav-container{
 padding:0px;
}

#nav-top-row {
 background-color: #6D6E70;
 color: #fff;
 padding: 0px 10px;
}

#nav-top-row a {
 color:#fff;
 padding-top:5px;
 padding-bottom:5px;
 font-size: 12px;
}

#nav-top-row a:hover {
 background-color: #CCCCCC;
}

#nav-bottom-row {
 background-color: #009578;
 padding:0px 10px;

}

#nav-bottom-row a {
 color:#fff;
}

#nav-bottom-row .dropdown-menu li {
 background-color:#00806B;
}

#nav-bottom-row .dropdown-menu li a:hover {
 background-color:#009578;
}

#nav-bottom-row li.dropdown.open a.dropdown-toggle {
 background-color:#00806B;
}

#logo {
 margin-top:35px;
 width:90%;
 max-width:250px;
 margin-right:auto;
 margin-left:auto;
}

#logo-div {
 padding:0px;
 background:rgba(255,255,255,.8);
}

.push-down { /*invisible div with no content that pushes down the main body content*/
 margin-top:75px;
}

<div id="nav-div"class="">
    <div id="logo-div" class="col-md-3">
      <a href="#">
      <img src="HM-Logo_Grn.png" id="logo" class="img img-responsive">
      </a>
    </div>
    <div id="nav-wrapper" class="col-md-9">
      <!-- Fixed navbar -->
      <nav id="full-nav" class="navbar navbar-default">
        <div id="nav-container" class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!-- <a class="navbar-brand" href="#">Project name</a> -->
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <div id="nav-top-row" class="row">
              <ul class="nav navbar-nav navbar-right ">
                <li><a href="#">SERVICES</a></li>
                <li><a href="#about">ACCESS REPORT</a></li>
                <li><a href="#contact">REQUEST INSPECTION</a></li>
              </ul>
            </div>
            
            <div id="nav-bottom-row" class="row">
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">COMPANY <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">PRESS RELEASES</a></li>
                    <li><a href="#">NEWSROOM</a></li>
                    <li><a href="#">AWARDS</a></li>
                    <li><a href="#">MEDIA ASSETS</a></li>
                  </ul>
                </li>
                <li><a href="#">RESOURCES</a></li>
                <li><a href="#">BUYERS</a></li>
                <li><a href="#">SELLERS</a></li>
                <li><a href="#">AGENTS</a></li>

              </ul>
            </div>
            
          </div><!--/.nav-collapse -->
        </div>
      </nav>
    </div>
  </div>


    <div class="push-down"></div>

Bootstrap 桌面上有 2 行链接的导航

Bootstrap Nav with 2 rows of links on desktop

navbar

responsive-design

twitter-bootstrap-3