桌面上带有 2 行链接的 Bootstrap Nav

Question

我需要创建一个带有 2 行链接的响应式导航。我更喜欢使用引导程序，因为它已经在网站上使用。任何帮助我指出正确方向的帮助将不胜感激！

What I need it to look like

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 的文档。这是链接 to Bootstrap's site

Answer 2

您需要花一些时间查看Bootstrap Navbar section，也需要花一些时间在examples 周围进行破解，您很快就会掌握窍门。

如果您想要一个大而深的菜单，请查看Yamm (yet another mega dropdown menu) 或类似的东西。有很多只是搜索引导菜单或下拉菜单......但基本导航非常灵活。

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>