Bootstrap 3: Смещение не работает?

У меня есть этот код:

<div class="row">
  <div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
  <div class="col-sm-3 col-md-12"></div>
</div>

Что я хочу для маленьких (см) экранов, так это иметь два div, которые имеют по три столбца, и смещение из 6 столбцов для первого div.

Для средних (md) экранов я хотел бы иметь два div с двенадцатью столбцами каждый (один по горизонтали уложен под другим) без смещений.

Как-то браузер не распознает класс col-md-offset-0. Он по-прежнему использует класс col-sm-offset-6. Любые идеи, почему?

Ответ 1

Какую версию бутстрапа вы используете? Ранние версии Bootstrap 3 (3.0, 3.0.1) не работали с этой функциональностью.

col-md-offset-0 должен работать, как показано в этом примере бутстрапа, найденном здесь (http://getbootstrap.com/css/#grid-responsive-resets):

<div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
   <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

Ответ 2

Нет col-??-offset-0. Все "строки" предполагают, что нет смещения, если оно не указано. Я думаю, что вам нужно 3 строки на маленьком экране и 1 строку на среднем экране.

Чтобы получить результат, я считаю, что вы ищете это:

<div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
    </div>
  </div>

Помните, что вы увидите только разницу на маленьком планшете с тем, что вы описали. Средний, большой и дополнительный маленькие экраны столбцов охватывают 12.

Надеюсь, что это поможет.

Ответ 3

Если я получу вас правильно, вам нужно что-то, что кажется противоположным желаемому обычно: вы хотите горизонтальную компоновку для небольших экранов и вертикально уложенных элементов на больших экранах. Вы можете достичь этого следующим образом:

<div class="container">
    <div class="row">
        <div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
        <div class="hidden-md hidden-lg col-xs-3">b</div>
    </div>
    <div class="row">
        <div class="hidden-xs hidden-sm">c</div>

    </div>
</div>

На маленьких экранах, то есть xs и sm, это генерирует одну строку с двумя столбцами со смещением 6. На больших экранах, то есть md и lg, он генерирует два элемента с вертикальной структурой в полной ширине (12 столбцов).