Question

我一直在努力制作一个带有列的响应式导航栏，但我无法对不同的尺寸做出很好的反应我尝试了很多东西：列偏移，信号，填充...但我可以得到一个不错的结果。这就是我到目前为止所做的事情：

    <nav class="navbar navbar-default ">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>



    <div class="navbar-collapse collapse" style="height: 0px;">
    <div class="row show-grid">

        <div class=" col-xs-8 col-md-6 col-md-offset-2" > 
          <ul class="nav navbar-nav" id="altre">
            <li><a href="#">Shop</a>
            </li>
            <li><a href="#">Style Guide</a>
            </li>
            <li><a href="#">Be a man</a>
            </li>
          </ul>
        </div>

        <div class=" col-xs-4 col-md-4"> 

           <ul class="nav navbar-nav hidden-xs" id="login">
             <li class="dropdown">
               <a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a> 
               <div class="dropdown-menu">
                 <form class="navbar-form" role="form">
                   <p><input class="form-control" type="text" placeholder="E-mail"></p>
                   <p><input class="form-control" type="password" placeholder="Contrasenya"></p>
                   <button type="button" class="btn btn-primary">Sign in</button>
                   <button type="button" class="btn btn-success">Log in</button>
                 </form>
               </div>
             </li>
           </ul>





           <form class="navbar-form text-center visible-xs" role="form">
             <p><input class="form-control" type="text" placeholder="E-mail"></p>
             <p><input class="form-control" type="password" placeholder="Contrasenya"></p>
             <button type="button" class="btn btn-primary">Sign in</button>
             <button type="button" class="btn btn-success">Log in</button>
           </form>


       </div>
     </div>
      </div>

    </nav>

乍一看它似乎正常工作，但是当你调整大小时，你会看到右边距和左边距之间的差异。

我现在非常迷失，有人知道一个干净的方法可以取得好成绩吗？

如果您不想逐个下载，请输入以下文件： https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing

感谢

Answer 1

你需要在行之前的div中使用.container类，你所遇到的问题似乎是在margin-left中使用百分比。

<div class="container"><!-- container -->
        <div class="row">
            <ul>...
        </div>
</div>

请参阅：http://jsfiddle.net/uFwnU/

如何使用bootstrap创建带边距的响应列

1 个答案: