html - Bootstrap 导航栏不能很好地调整宽度

Question

我不知道为什么增加我的导航栏的宽度增量只发生在栏的右侧，例如，这是我的栏的 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>