Как добавить маржу в бутстрап?

Question

У меня есть HTML:

<div class="col-xs-16"> 
    <div class="item col-xs-8"></div> 
    <div class="item col-xs-8"></div> 
    <div class="item col-xs-8"></div> 
</div> 

Блоки с col-xs-8 имеют CSS display:inline-block. Как я могу добавить margin для каждого col-xs-8? Я попытался, но элемент перемещен из строки в следующую строку.

Answer 1

Две вещи:

1) подвесная система Bootstrap является 12-колонка сетке. Это означает, что каждая строка должна содержать до 12 (не 16 или 24, как в ваших примерах). Смотрите некоторые примеры здесь:

• http://getbootstrap.com/examples/grid/
• http://getbootstrap.com/css/#grid

2) Система сетки означает, что элементы имеют размеры с процентными ширин. Добавление маржи в сетку действительно выкинет вещи из рук. Например:

Поскольку сетка основана на двенадцати столбцах, каждая из двух .col-md-6 будет составлять 50% ширины их родительского контейнера на «средних устройствах» (терминология Bootstrap для ширины браузера> = 992px). Вместе это составляет 100% ширину их контейнера. Добавление поля увеличивает ширину, делая общую ширину двух элементов и их маржа более 100%, нажимая элементы на отдельные строки.

Чтобы добавить пространство вокруг элементов в сетке, рассмотрите прокладку (с box-sizing: border-box;, позволяющую рассчитывать ширину прокладки в ширину элемента). Это позволит системе сетки Bootstrap продолжать работу по назначению, создавая пространство вокруг вашего контента.

Answer 2

Если вы просто хотите, мало места/б элементов, которые вы можете использовать отступы Поскольку запас будет добавить пространство вокруг элементов, так что если ваш col-xs-8 имеет как 50% width то в строке у вас есть 50% xs-8 block + margin space + 50% xs-8 block так что ваш элемент будет перемещен на следующую строку.