Почему не рекомендуется устанавливать контейнеры для жидкости?

Question

Я использовал Bootstrap, чтобы сделать макет своего сайта. В содержании страницы есть виджеты. У этого виджета есть своя структура div, table, span и т. Д. И не использует бутстрап для позиционирования. Некоторые из этих виджета имеют шаблон для отображения данных. Я хочу использовать bootstrap в этом шаблоне.

Это действительно прекрасно работает, когда я это делаю, но в документации явно написано, что они не гнездятся в контейнерах. Зачем?

http://jsbin.com/xokodonajo/1/

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

Должен ли я игнорировать предупреждение? Предупреждение означает только прямую вложенность? Будут ли я сталкиваться с проблемами в долгосрочной перспективе?

Answer 1

Я думаю, что это было слишком сложно. Это должно быть все, что вам нужно.

<div class="container-fluid" style="border:2px solid red"> 
    <div class="row" style="border:2px solid yellow"> 
    <div class="col-sm-12" style="border:2px solid green"> 
     <!-- Some Widget --> 
     <div class="kendo-grid" style="border:2px solid pink"> 
     <div>This is a widget</div> 
     <div>Widget Templated Data</div> 
     </div> 
    </div> 
    </div> 
</div> 

Я незнаком с выходом kendo-grid, но если это просто <div>, вам нужно всего лишь поместить его внутри col-*-* класса, чтобы он правильно выровнять в container-fluid. Проверьте этот Bootply, чтобы узнать, о чем я говорю.

Bootply Example

По вопросу вложенности container классов, это возможно, но не должно быть необходимо, если вы используете row и col-*-* классов, как они предназначены.

Надеюсь, что это поможет!

Редактировать

Другой альтернативой является добавление Widget Template Data в другую строку, например так:

<div class="container-fluid" style="border:2px solid red"> 
    <div class="row" style="border:2px solid yellow"> 
    <div class="col-sm-12" style="border:2px solid green"> 
     <div class="kendogrid" style="border:2px solid pink"> 
     <div>This is a widget</div> 
     </div> 
    </div> 
    </div> 
    <div class="row" style="border:2px solid yellow"> 
    <div class="col-sm-12" style="border:2px solid green"> 
     <div style="border:2px solid pink"> 
     <div>Widget Templated Data</div> 
     </div> 
    </div> 
    </div> 
</div> 

И обновление Bootply:

Bootply