我知道你可以在嵌套列中嵌套行,但是“违反规则”直接在行中嵌套行吗?
例如:
<div class="row"> <div class="row"> cols in here </div> <div class="row"> cols in here </div> <div class="row"> cols in here </div> </div>
或者这些必须始终在列内吗?
解决方法
is it ‘against the rules’ to nest rows directly within rows?
不违反规则,但不符合指南的最佳做法.
每bootstrap guidelines,third point under introduction –
..and only columns may be immediate children of rows”.
*编辑:This is still true with Bootstrap 4.0 Beta.上述文档的链接将自动重定向到3.3版文档.谢谢@Aakash指出这一点.
这是因为Bootstrap用于布局的填充,通过行 – 列 – 行模式嵌套是一种很好的做法,即将一行与一列嵌套到嵌套中.
请参阅下面的代码段中的差异.第一组标记打破了Bootstrap布局,尽管没有任何不好的事情发生.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="row"> <div class="col-xs-6">One</div> <div class="col-xs-6">Two</div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-6">One</div> <div class="col-xs-6">Two</div> </div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-xs-12">One</div> <div class="col-xs-12">Two</div> <div class="col-xs-12">Three</div> </div> </div>