Непонятное поведение системы сетки Bootstrap

Я новичок в сетке бутстрапов и до сих пор понял, что вы можете определить строку с столбцами шириной, чтобы их сумма составляла 12 для этой категории (lg, sm или md) , В следующем разделе второй не определяет ширину для категории «lg». Однако в браузере он отображается как охватывающий 3 столбца из 12.Непонятное поведение системы сетки Bootstrap

Какое правило здесь?

 
<div class="row">
 
    <div class="col-sm-9 col-lg-6 text-danger">
 
     I am the main content.
 
    </div>
 
    <div class="col-sm-3 text-warning">
 
     I am the main sidebar.
 
    </div>
 
    <div class="col-lg-3 visible-lg text-success">
 
     I am the secondary sidebar that only shows up on LARGE devices.
 
    </div>
 
</div>

источник

2014-10-28 Malik

Это не правильно. В системе сетки Bootstrap имеется множество обучающих программ. Сначала я изучил базовый css, прежде чем начинать с рамки. – Christina

Привет, Кристина, мой вопрос касается тегов класса сетки, которые определяет bootstrap. Знание css здесь не поможет. Я смутился этим, читая учебник по сетке. – Malik

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php ширина всех столбцов одинакова, каждый столбец равен 100/12, но col-sm-X охватывает 768px min- ширину до следующей минимальной ширины: 992px до следующего 1200px. Итак, если у вас есть col-sm-6, в этом окне просмотра размера и вверх оно будет на 50%, если вы не установите оба col-sm-6 и col-md-4, тогда вы получите 50%, а затем 33.3333%. – Christina

Возрождение старого вопроса здесь .. но, это нормально, чтобы превысить 12 единиц в одной строке. Он просто заставляет столбцы обертываться, и он находится в Bootstrap docs.

Если в одну строку помещено более 12 столбцов, каждая группа дополнительных столбцов будет, как один блок, обернуть на новую строку.

When to use Bootstrap's row class

источник

2016-05-23 15:06:25 ZimSystem

Непонятное поведение системы сетки Bootstrap

ответ

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