Отзывчивый navbar с 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 не работают должным образом в 480px шириной. Я не знаю, почему 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; 
}