Щебет Bootstrap 3 пункт меню

Question

У меня есть настройка меню в шаблоне начальной загрузки, который не распространяется полностью справа от браузера.

<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 имеет тяговое и левостороннее классы, что и займет. Я построил для вас макет:

[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>