Неправильно ли для столбцов bootstrap3 добавить до менее 12? (или, понимая -выполнение)

Короткая версия: col-x-offset-n применяется только слева, или применяется к левому и правому, если это то, что нужно сделать 12? Например, могу ли я просто сделать "col-x-10 col-x-offset-1", чтобы получить контейнер с 10 столбцами с 1 дополнительным столбцом слева и справа? Кажется, что это работает, но это не то, что предлагает документация.

Более длинная версия: в качестве примера я пытаюсь центрировать div, используя системную сетку bootstrap 3. В размере col-xs я хочу, чтобы она была полной ширины, но выше этого я хочу, чтобы она была сосредоточена с меньшим количеством дополнений с каждой стороны. Все документы, конечно, говорят, что количество столбцов должно составлять 12. Поэтому, если я это сделаю:

 <div class="container">
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10">
            ...content here...
        </div>
        <div class="col-sm-1">
        </div>
    </div>
</div>

он работает так, как я ожидаю, с двумя пустыми столбцами col-sm-1, действующими как прокладка слева и справа. Но я могу сделать это с меньшей разметкой, используя -offset:

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
        <div class="col-sm-1">
        </div>
    </div>
</div>

Как говорят ботстрап-документы: "Перемещение столбцов вправо с использованием классов .col-md-offset- *. Эти классы увеличивают маркер слева столбца на * столбцы." Таким образом, в этом случае у меня есть 10 столбцов плюс 1 столбец в смещении плюс 1 столбец в следующем пустом столбце col-sm-1, равном 12 столбцам.

Теперь для вопроса окончательно: если я удалю окончательный пустой div-col-sm-1, я все равно получаю тот же результат (страница по центру совпадает с обоими примерами раньше), но мои столбцы теперь составляют всего 11.

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
    </div>
</div>

Можно ли это делать? Является ли Bootstrap просто заполнением в последнем столбце для меня? Я хотел бы просто выбросить его и использовать только "col-sm-10 col-sm-offset-1" или "col-sm-8 col-sm-offset-2" или "col-sm-6 col-sm- offset-3" (хотя они только добавляют до 11,10 и 9 полных столбцов соответственно), но действительно ли это способ сделать это или это просто причуда, что все работает хорошо? Похоже, что bootstrap применяет смещение как влево, так и вправо, если это необходимо, но я не могу найти документацию, подтверждающую это.

(И, возможно, с помощью этого простого примера есть более простой способ сделать то, что я здесь описываю, но я пытаюсь понять, как работает -offset, а не просто центрировать простой div с маркой: 0 auto или что-то вроде что.)

Ответ 1

В документации по загрузке приводятся примеры, которые не содержат до 12.

Это должно быть приемлемо:

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
    </div>
</div>

Для справки http://getbootstrap.com/css/#grid перейдите в раздел "компенсирующие столбцы", а последний пример добавит до 9 и является аналогичным центральным примером.

<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>