自举导航栏不调整宽度以及

Question

我dont't知道为什么增加我的导航栏的增量仅在栏右侧会出现宽度，例如，这是我的我的吧HTML：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">     
      <ul class="nav navbar-nav navbar-left"> 
       <li> 
        <a href="#">Free shipping over $50</a> 
       </li> 
      </ul>    
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a class ="lita" href="#about">Be part of THE CIRLCE</a> 
       </li> 
       <li> 
        <a href="#services">JOIN </a> 
       </li> 
       <li> 
        <a href="#contact">LOGIN</a> 
       </li> 
      </ul> 
     </div> 

使用这个CSS：

#bs-example-navbar-collapse-1{ 
background-color: #fde6dc; 
padding: 2px 40px; 
width: 100%; 
} 

的结果，这是一个：

http://postimg.org/image/m7qu1vz45/full/

但是，如果我150％移动的宽度，这种情况发生：

http://postimg.org/image/60px3u3m9/full/

这究竟是为什么？为什么它不调整保持比率，如果我提供保证金它有助于解决问题，但是当我重新调整屏幕大小时，它不起作用。

任何人有想法？

Answer 1

请尝试一下本作导航栏，

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <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> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-left"> 
      <li> 
        <a href="#">Free shipping over $50</a> 
       </li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li> 
        <a class ="lita" href="#about">Be part of THE CIRLCE</a> 
       </li> 
       <li> 
        <a href="#services">JOIN </a> 
       </li> 
       <li> 
        <a href="#contact">LOGIN</a> 
       </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>