Bootstrap：如何防止导航被截断？

Question

我在一个 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;
}

如果我移除容器，导航会浮动到最左侧，并且不会随页面流动。我可以使用一些见解来让导航正确调整大小而不会截断。

Answer 1

你需要使用正确的引导结构。

问题就在这里：

row banner和row slider-bg div 类。只需删除 row 名称，一切都需要工作。

开始构建引导程序的错误原因是放在container 类的父行。容器首先在引导程序中包装类，然后是row，然后是cols

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