css - Twitter Bootstrap 3 菜单问题

Question

我在 Bootstrap 模板中设置了一个菜单，它没有一直延伸到浏览器的右侧。

<div class="row no-gutter featureMenu1">
        <div class="col-md-2"></div>
        <div class="col-md-8">

            <div id="navcontainerFeature1">
                <ul id="navlistFeature1">
                <li><a id="menu_0" class="feature1 feature1MenuActive">CURRENT PROJECTS</a></li>
                <li><a id="menu_1" class="feature1">PAST PROJECTS</a></li>
                <li><a id="menu_2" class="feature1">CUSTOM HOME BUILDING</a></li>
                </ul>
            </div>

        </div>
        <div class="col-md-2"></div>
    </div>

.featureMenu1 {
   background: #153586;
   width: 100%;
   height: 70px;
}

#navcontainerFeature1 ul
{
   margin-top: -10px;
   padding-left: 0;
   margin-left: 0;
   background-color: #153586;
   color: #859fd0;
}

您可以在此处的元素菜单上的测试站点上看到我的意思。两个蓝色菜单栏没有位于屏幕右侧。

Answer 1

Bootstrap 有一个 pull-right 和 pull-left 类，它们将采用它。我在这里为您构建了一个模型:

[1]: http://www.bootply.com/7qiDiqLeQb#


<!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <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 pull-left" href="#">Project name</a>
          </div>


          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav pull-right">
              <li class="active"><a href="#">CURRENT PROJECTS</a></li>
              <li><a href="#">PAST PROJECTS</a></li>
              <li><a href="#">CUSTOM HOME BUILDING</a></li>

            </ul>

          </div><!--/.nav-collapse -->


        </div><!--/.container-fluid -->
      </nav>