0

Как в bootstrap-3, сделать модульную сетку, которая бы была не фиксированной ширины, а расчитывалась в процентах от ширины экрана, допустим 100% от размера ширины экрана.

Я делаю так, но ширина фиксированная. То есть если уменьшать размер ширины браузера, то блок не будет адаптироваться под эту ширину, и будет появляться ползунок для прокрутки страницы по ширине.

<link rel="stylesheet" type="text/css" media="all" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="build/lib/jquery-2.2.0.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="background-liteblue">
                .col-md-6
            </div>
        </div>
        <div class="col-xs-6">
            <div class="background-red">
                .col-md-6
            </div>
        </div>    
    </div>
</div>
11
  • 1
    судя по содержанию тегов div Ваши классы должны быть class="col-md-6". На малых и сверх малых разрешениях они расположаться один над другим на всю ширину экрана
    – torokhkun
    10 янв 2016 в 20:55
  • 1
    это странное поведение, так быть не должно. у вас точно нигде не переопределены классы? background-red и background-liteblue тут нет фиксированной ширины?
    – torokhkun
    10 янв 2016 в 21:11
  • 2
    действительно, неполная картина 10 янв 2016 в 21:13
  • 2
    и еще вопрос для уверенности. с путями к файлам все ок? 10 янв 2016 в 21:18
  • 2
    нормально) раз тестируешь, попробуй Susy подключить, ты же все равно через Галп собираешь. если компас подключал, она с ним будет работать, а если нет, то через Bower. Мне если и нужна сетка, то я только сьюзи юзаю 10 янв 2016 в 21:26

1 ответ 1

1

Это поведение было из-за библиотеки от которой мне пришлось отказаться - 960 Grid System Может кто знает, актуальна ли она сейчас. Я так понял что , нет. Ну хотелось бы в идеале увидеть отклик.

 <!--960 Grid System
        <link rel="stylesheet" type="text/css" media="all" href="build/lib/960-Grid-System-master/960-Grid-System-master/code/css/min/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="build/lib/960-Grid-System-master/960-Grid-System-master/code/css/min/text.css" />
        <link rel="stylesheet" type="text/css" media="all" href="build/lib/960-Grid-System-master/960-Grid-System-master/code/css/min/960.css" />
1
  • 2
    она работает, по крайней мере, но бутстрап - мейнстрим 10 янв 2016 в 21:27

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.