引导导航栏显示

Question

自举导航栏宽度依赖于它的内容并在屏幕尺寸。

对于小屏幕尺寸，导航栏标题打包在一个按钮中，对于大屏幕尺寸，如果有足够的空间，标题都对齐。

对于中间屏幕尺寸，其结果可能是非常麻醉剂像如下图所示：

它是否给办法有一个单一的下拉按钮，或者如果对齐所有标题有足够的空间，但为了防止在na-barbar内容之间进行配置？

这里是与上面的示例的小提琴：https://jsfiddle.net/bb61c412/165/

并且相应的代码。

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
 

 
<div class="navbar navbar-default navbar-fixed-top "> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 

 
     <a href="#" class="navbar-brand">website</a> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="navbar-collapse collapse" id="navbar-main"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">a long Title1</a> 
 
     </li> 
 
     <li class="active"><a href="#"> a long Title2</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">a long Title3 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" aria-labelledby="themes"> 
 
      <li><a href="#"> Item1</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"> Item2</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"> Item3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="active"><a href="#">a long Title4</li> 
 
      <li class="active"><a href="#">a long Title5</li> 
 
      <li class="active"><a href="#">a long Title6</li> 
 
      <li class="active"><a href="#">a long Title7</li> 
 
      <li class="active"><a href="#">a long Title8</li> 
 
      
 

 

 
      </ul> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 

 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

您可以覆盖默认断点的导航栏值，以便栏本身被隐藏，并且汉堡按钮保持可见状态，直到屏幕宽度变大为止。使用类似：

@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

对媒体查询max-width的991px值是自定义断点值可以改变。所有的

Updated fiddle

Answer 2

您可以定义自己的手机菜单中的断点。 您可以通过自定义Bootstrap版本来完成。最简单的方法是前往http://getbootstrap.com/customize/#grid-system并定义@ grid-float-breakpoint（例如800px）。因此，您将可以使用更改的断点下载Bootstrap文件。

Answer 3

首先，你有很多未闭合a标签，从TITLE4。下一步，为了覆盖导航栏的@media-query，Lloyd Banks已经为这种情况写下了非常好的解决方案。您可以将其包含在您的styles.css文件中，链接在bootstrap.css文件下面。我更新了的jsfiddle与封闭的标签和新的断点

jsfiddle