Bootstrap .row класс правильное использование

Я использую Bootstrap в течение 4 месяцев, и есть кое-что, о чем я все еще не слишком уверен.Bootstrap .row класс правильное использование

Какое правильное использование класса строк? Вот два примера

Первый пример: каждая строка содержит только 12 столбцов

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    </div> 
</div>

Второй пример: каждая строка в основном похожа на контейнерный класс, просто удалив левый и правый отступы. Как вы можете видеть, эта строка равна 24 столбцам, поэтому она будет создавать 2 строки, так как 12 является максимальным.

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    </div> 
</div>

источник

2015-07-23 Antonin Cezard

Не получите недоразумения с выходом, который вы получите со вторым решением. Первый правильный. Использование второго решения в конечном итоге приведет к проблемам на сложных страницах. –

Использование стилей грузиться по умолчанию, есть пробелы (margin-bottom) между рядами. Если вы хотите это пространство, используйте row. Если вы не хотите пробелов между элементами внутри row, вы добавляете столько col s, сколько хотите, и они будут обертываться, как вы видели.

Обертка колонн - это абсолютно особенность Bootstrap; это то, что делает гибкие макеты возможными.

Наконец, вы можете использовать row для принудительной «жесткой обертки», если у вас есть row с менее чем 12 столбцами, и вы хотите, чтобы следующий элемент всегда находился в другой строке.

источник

2015-07-23 14:06:24 Jimothy

Вы переоцениваете ситуацию. класс row был создан только для обработки до 12 столбцов. Второе - технически неверное использование. Первый способ - это то, как вы должны реализовать row.

EDIT:

После просмотра упаковки в документации, я бы сказал, бутстраповская каркас изготовлен для размещения этого, как колонны, которые слишком широки уже завернуты, но это еще лучше, чтобы попытаться сохранить его 12 колоний. Если вам это нужно, вы можете использовать больше. Это будет зависеть от того, что вам понадобится в качестве разработчика.

(сделал мой комментарий ответ, как это было бы более уместно в качестве одного)

источник

2015-07-23 13:52:45 Snappawapa

Проблема заключается в том, что упаковка столбца находится в официальной документации http://getbootstrap.com/css/#grid-example-wrapping и не помечена как неправильное использование, поэтому она немного дезориентирована. –

Да, так оно и есть. Я бы сказал, что в этом случае структура бутстрапа сделана таким образом, чтобы вместить это, поскольку слишком широкие столбцы уже завернуты, но лучше всего попытаться сохранить их до 12 колоний. Если вам это нужно, вы можете использовать больше. – Snappawapa

Bootstrap .row класс правильное использование

ответ

Смежные вопросы