Bootstrap 3 строки и столбцы

Мне просто нужно уточнение с определенными точками в строках и столбцах Bootstrap Grid. По этой ссылке: http://getbootstrap.com/css/#grid; 3-й пункт в разделе «Введение» гласит: «Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк».Bootstrap 3 строки и столбцы

Что именно это означает? То, что я пытаюсь сделать, это положить 2 столбца: col-xs-4, col-xs-8; внутри col-xs-12, который сам внутри строки. Будет ли эта работа ..

<div class="row"> 
<div class="col-xs-12"> 
    <div class="col-xs-4">some content</div> 
    <div class="col-xs-8">some other content</div> 
</div>

Или мне придется вставить новый (и nested..i предположим) строку внутри XOL-хз-12, а затем остальные 2 COLS в этой строке?

источник

2014-02-26 Rahul Patwa

Update 2018 для Bootstrap 3 и 4

row добавляет отрицательный запас 15px с обеих сторон, так что выгода в том, что вы можете ..

создания контента ширина 100% внутри container
отдельное содержимое в строки (силовые столбцы должны быть на линии)
гнездо строки сетки> col и поддерживать выравнивание по внешним сторонам

В качестве you can see here вы всегда должны использовать row.

От Bootstrap 3 Docs ...

Контент должен быть размещен внутри колонны, и только столбцы могут быть непосредственными потомками строк.

От Bootstrap 4 Docs ...

Ряды являются оболочками для колонн. Каждый столбец имеет горизонтальную прокладку (называемую желобом) для управления пространством между ними. Это дополнение затем противодействует строкам с отрицательными полями. Таким образом, все содержание в ваших столбцах визуально выровнено по левой стороне.

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

источник

2014-02-26 21:10:47 ZimSystem

спасибо за ваш ответ, и особенно ссылки! Теперь я вижу разницу между использованием внутренней строки vs, не использующей ее, заключается в том, что она влияет на 15px-край содержимого :) До сих пор я думал, что он должен разбить разметку и не работать, если внутренняя строка была опущена. –

Вы должны иметь родителя <div class="row"> для использования <div class="col-*>

что-то вроде этого

<div class="row"> 
    <div class="col-xs-12"> 
    <div class="row"> 
     <div class="col-xs-4">some content</div> 
     <div class="col-xs-8">some other content</div> 
    </div> 
    </div> 
</div>

источник

2014-02-26 21:11:05 Muhammed

Теперь в приведенном выше коде, если я удаляю второй ряд div ..и имеют col-xs-4 & col-xs-8 непосредственно под col-xs-12, тогда он также работает без каких-либо проблем. это то, о чем я ЗДЕСЬ? он не должен работать, если я иду по документации, но это так! –

@RahulPatwa для этого вам нужно ** гнездо ** http://getbootstrap.com/css/#grid-nesting – Muhammed

Bootstrap 3 строки и столбцы

ответ

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