引导程序：如何防止导航截断？

我正在Bootstrap 3网站上工作，除了主菜单以外，其他所有东西都可以使用。它在整体页面大小调整之前调整大小和截断，并且在调整到移动导航之前快速将最后两个导航项拖到下一行，中断滑块，从而具有头发触发器。引导程序：如何防止导航截断？

该页面可以找到here。的HTML如下：

<!-- Navigation --> 
    <div class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
       </div><!-- navbar-header --> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#attorneys">Our Attorneys</a></li> 
      <li><a href="#business-litigation">Business Ligitagion</a></li> 
      <li><a href="#business-litigation">Personal Injury</a></li> 
      <li><a href="#business-litigation">Verdicts &amp; Settlements</a></li> 
      <li><a href="#business-litigation">Client Testimonials</a></li> 
      <li><a href="#business-litigation">Map &amp; Directions</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div><!-- container --> 
    </div><!-- navbar -->

的CSS：

/* @group navigation */ 

.navbar { 
    position: relative; 
    min-height: 35px; 
    margin-bottom: 0; 
} 

.navbar-default { 
    background-color: #9d2024; 
    border: none; 
    height: 25px; 

} 

@media (max-width: 767px) { 
    .navbar-default { 
    min-height:50px;  
} 
} 
.navbar-default .navbar-brand { 
    color: #fff; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #fff; 
    border-bottom: 6px solid #fff; 
} 

.navbar-default .navbar-text { 
    color: #fff; 
} 

.navbar-default .navbar-nav > li > a { 
    color: #fff; 
    padding: 3px 10px; 
    margin: 5px 0 0 0; 
    border-right: 1px solid #fff; 
    font-family: trebuchet ms; 
    text-transform: uppercase; 
} 

.navbar-default .navbar-nav > li:last-child > a { 
    border: none; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #fff; 
    border-bottom: 4px solid #fff; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #fff; 
    border-bottom: 4px solid #fff; 
    background-color: #9d2024; 
}

如果删除了导航漂浮到最左边，不与页面流的容器。我可以使用一些见解来让导航正确调整大小而不会截断。

来源

2014-09-30 fmz

你要么摆脱一些菜单元素，要么使用'font-size：9px！important;'（是的，如果你想在保持响应行为的同时只有一条线，那么这就是你需要的确切大小），没有其他的它不会截断的方式 – Devin 2014-09-30 19:50:48

那么你是否尝试更早地切换到移动下拉导航？或者你是否试图让这两个导航项与页面一起流动？显然，除非字体大小和间距减小，否则它们不会适合一行。 – mtaube 2014-09-30 20:03:36

我想保留它直到移动导航。有一个问题，我在导航的右侧看到一个很大的空间，就像填充一样，但那里没有任何东西。 – fmz 2014-09-30 20:08:11

您需要使用正确的引导程序结构。

问题是在这里：

row banner和row slider-bg的div类。只需删除row名称和所有需要的工作。

开始构建引导程序的错误原因是放一行container类的父代。容器是第一个包装自举类，然后来row，然后cols

对于菜单使用较小的字体大小或内部填充li, a。

来源

2014-09-30 19:54:00 Foxsk8

感谢您的反馈。我从两个div中删除了“row”，并删除了水平滚动条，但导航仍然截断。我错过了别的吗？ – fmz 2014-09-30 20:06:19

没有足够的空间显示最后一个菜单项。您可以缩小字体大小或减小内部填充。 '.navbar-default .navbar-nav> li> a {padding：3px 7px;}' – Foxsk8 2014-09-30 20:13:35

删除'行'和缩小字体大小的组合完成了。谢谢！ – fmz 2014-09-30 20:16:28

引导程序：如何防止导航截断？

回答

相关问题