如何 - 优文库

我使用的bootstrap3导航栏，当我降低屏幕分辨率我在这个问题修改bootstrap3导航栏的响应尺寸：如何

你可以看到，因为元素的数量是当我降低屏幕分辨率时，导航栏会将向右对齐的元素向下传递。

我要避免这种情况，就是这样的：

应该发生的，而不是我发现的问题。

导航栏代码：

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <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="#">Las Holass</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Hooola Holaaa!</a></li> 
     <li><a href="#">holahola</a></li> 
     <li><a href="#">Hooola hola!</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-hover" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Holita 
      <i class="glyphicon glyphicon-user white"></i> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><a id="login" href="#">Cerrar Sesión</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Hooola Holas</a></li> 
     <li><a href="#">hoola holaaa</a></li> 
     </ul> 
    </div><!-- fin navbar-collapse --> 
    </div><!-- fin container-fluid --> 
</nav>

有一种方法，以限定像素的宽度从该肘节导航按钮就会出现？

例如，在0px和890px之间。

来源

2016-11-15 Roberto Sepúlveda

变化从1000像素导航栏断点所需的断点，您希望导航栏崩溃

@media (max-width: 991px) { 
 
    .navbar-header { 
 
     float: none; 
 
    } 
 
    .navbar-left,.navbar-right { 
 
     float: none !important; 
 
    } 
 
    .navbar-toggle { 
 
     display: block; 
 
    } 
 
    .navbar-collapse { 
 
     border-top: 1px solid transparent; 
 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
 
    } 
 
    .navbar-fixed-top { 
 
     top: 0; 
 
     border-width: 0 0 1px; 
 
    } 
 
    .navbar-collapse.collapse { 
 
     display: none!important; 
 
    } 
 
    .navbar-nav { 
 
     float: none!important; 
 
     margin-top: 7.5px; 
 
    } 
 
    .navbar-nav>li { 
 
     float: none; 
 
    } 
 
    .navbar-nav>li>a { 
 
     padding-top: 10px; 
 
     padding-bottom: 10px; 
 
    } 
 
    .collapse.in{ 
 
     display:block !important; 
 
    } 
 
}

refernce https://stackoverflow.com/a/36289507/3615004

来源

2016-11-15 14:13:23 amyogiji

ty这么多，我只是将这个媒体查询添加到我的style.css并工作。 –

您可以更改此变量并为您制作自定义版本的Bootstrap，只需转到Bootstrap website即可。在“网格系统”部分需要变量“@ grid-float-breakpoint”。

来源

2016-11-15 14:11:21 Alex

在bootstrap.min.css文件或css文件夹中的另一个引导文件中是否存在这种可能性？ –

它设置使用媒体查询自举。 min.css文件（如果不使用缩小版本，则为bootstrap.css文件）。

如果您仔细查看该文件，您会看到很多导航资料都被包装在@media (min-width:768px){}中。我首先调整媒体查询中的像素，或者将导航内容从媒体查询中提取出来，并将其放入我自己的样式表中，以便我可以相应地调整媒体查询，而不会影响可能发生的其他任何事情包裹在@media (min-width:768px){}。

来源

2016-11-15 14:15:22

如何

回答

相关问题