使用Bootstrap的响应式导航栏2.3.2

Question

我在我的网站中使用Bootstrap 2.3.2。我试图让100％响应（这就像70％），所以我想用一个导航栏以小分辨率折叠。

这是我的代码：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"> 
      <div> 
       <a class="brand" href="/{{locationService.getLangKey()}}" style="text-decoration: none"><img src="img/logo.png" /><span class="logo">yanpy</span></a>    
      </div> 
     </div> 
     <div class="span8 pull-right" style="padding-right: 10px"> 
      <div class="navbar"> 
       <div class="navbar-inner custom-navbar-inner"> 
        <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> 
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> 
        <div class="nav-collapse collapse" style="padding-top: 4px">     
         <!--<div ng-include src="'partials/login.html'"></div>-->      
        </div><!--/.nav-collapse --> 
       </div><!-- /.navbar-inner --> 
      </div><!-- /.navbar --> 
     </div> <!-- span8 --> 
    </div> 
</div> 

出于某种原因，span4和span8未在480像素宽度的正常工作。我不知道为什么span4会占用整行宽度。

Answer 1

这个版本自举的，下面跨越：

@media (max-width: 767px) 

默认〜100％的宽度。您将不得不删除以下样式，以使跨度在此屏幕宽度以下工作。您需要找到下面的内容并删除宽度：100％行。

@media (max-width: 767px) 
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { 
    float: none; 
    display: block; 
    width: 100%; 
    margin-left: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}