Отзывчивая панель навигации с Bootstrap 2.3.2

Я использую 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 занимает всю ширину строки.


twitter-bootstrap twitter-bootstrap-2
person Rober    schedule 23.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Эта версия бутстрапа охватывает ниже:

@media (max-width: 767px)

по умолчанию ширина 100%. Вам нужно будет удалить приведенный ниже стиль, чтобы диапазоны работали ниже этой ширины экрана. Вам нужно найти ниже и удалить строку width: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;
}
person Tom Rudge    schedule 23.06.2015
comment
Но является ли это ошибкой? Или у него есть цель. Должен ли я обновить исходный файл CSS начальной загрузки. Я думаю, лучше перезаписать стиль, верно? - person Rober; 23.06.2015
comment
К сожалению, вы не сможете обновить свой бутстрап, так как классы теперь изменились, например. Span4 теперь xs-col-4. Это не ошибка. Новая начальная загрузка позволяет использовать % для любой ширины и может изменяться в разных контрольных точках, где вы считаете нужным. Вам нужно будет перезаписать стиль или изменить исходный файл. Изменение файла и удаление строки будет самым простым способом - person Tom Rudge; 23.06.2015