Question

“sm”屏幕尺寸的导航链接填充问题。当我试图写“sum”的媒体查询时，它会影响“lg”和“md”。 http://jsfiddle.net/L1ozsu2n/

<nav class="navbar navbar-default">
  <div class="container">              
    <div class="row">
      <div class="col-lg-3 col-lg-push-9 col-md-3 col-md-push-9 col-sm-3 col-sm-push-9"> 
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <form class="navbar-form navbar-right " role="search"> 
            <div class="form-group form_search">
              <input type="text" class=" search_box" placeholder="SEARCH"/>
            </div>
          </form>   
        </div>
      </div> 
      <div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-9 col-sm-pull-3">                    
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">MEN</a></li>
            <li><a href="#">WOMEN</a></li>
            <li><a href="#">KIDS</a></li>
            <li><a href="#">NEW ARRIVALS</a></li>
            <li><a href="#">GOODSALE</a></li>
          </ul>                          
        </div>
      </div>
    </div>                  
  </div>
</nav>

Answer 1

你的意思是右边的菜单是如何对着div的顶部而不是垂直居中的？

从第四个div中删除“navbar-header”类。

Answer 2

导航后，使用.container-fluid代替容器。

<nav class="navbar navbar-default">
  <div class="container-fluid">

Bootstrap navlinks填充问题

2 个答案: