0

我一直在尝试制作一个带有列的响应式导航栏，但我无法对我尝试了很多东西的不同大小做出很好的反应：列偏移、容器、填充......但我无法得到一个体面的结果。这是我到目前为止所做的：

    <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

谢谢

4

1 回答 1

0

您需要在行之前在 div 中使用 .container 类，您遇到的问题似乎是在左边距中使用百分比。

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

见：http: //jsfiddle.net/uFwnU/

于 2013-10-25T16:02:31.103 回答