如何使用bootstrap创建类似自适应选项卡的导航栏？

如何使用bootstrap创建类似响应标签的导航栏？我的要求是制作应该像自举导航栏一样响应的标签。我曾尝试这样的...如何使用bootstrap创建类似自适应选项卡的导航栏？

<nav class="navbar navbar-default"> 
     <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> 
      <span class="sr-only">Toggle</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

     </div> 

     <div class="navbar-collapse in" id="bs-example-navbar-collapse-6" style="height: auto;"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div> 
    </nav>

谁能帮助....

来源

2015-01-21 Eldho George

这是你的意思是响应标签？ http://openam.github.io/bootstrap-responsive-tabs/ – 2015-01-21 04:14:57

我的意思是..但已经尝试过..谢谢你... – 2015-01-21 07:00:19

我发现一个有用的插件，这样做，你可以try this responsive tabs

的标签转换手风琴当它达到一个CSS断点。您可以使用此插件作为在桌面，平板电脑和手机上优雅显示选项卡的解决方案。

来源

2015-01-22 09:41:28 tvshajeer

引导使用媒体查询根据屏幕宽度来改变头，所以你需要使用它们，以及。

当宽度大于768px时，将显示列表项，并且任何下面的项都将导致它们被隐藏。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <header> 
    <div class="navbar-header"> 
     <a class="navbar-brand">Bootstrap</a> 
     <div class="navbar-toggle"></div> 
    </div> 
    <nav class="navbar navbar-default"> 
    <ul> 
     <li>About</li> 
     <li>Services</li> 
     <li>Contact</li> 
     <li>Location</li> 
    </ul> 
    </nav> 
    </header> 
</body> 
</html>

CSS

@media (min-width: 768px) { 
    .navbar li { 
    float: left; 
    list-style-type: none; 
    display: block; 
    padding: 15px 10px; 
    } 
    .navbar-toggle { 
    display: none; 
    } 
    .navbar { 
    display: block !important; 
    } 
} 

.navbar-brand { 
    display: block; 
    float: left; 
    background: #6f5499; 
    padding: 15px; 
} 

.navbar-toggle { 
    position: relative; 
    float: right; 
    background-color: #6f5499; 
    padding: 20px; 
} 
.navbar { 
    display: none; 
}

见this jsbin。

来源

2015-01-21 05:34:29 PartyPanda

试试这个：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <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="#">Bootstrap theme</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav>

下面是如何在引导创建响应菜单为例jsfiddle。

来源

2015-01-21 05:44:42

如何使用bootstrap创建类似自适应选项卡的导航栏？

回答

相关问题