我正在使用bootstrap v4,当我在额外的div中包装列时,布局会被破坏.这是为什么?链接到codepen
http://codepen.io/mariuszdaniel/pen/aJJjzJ
作品
<div class="container"> <div class="row"> <div class="col-4"></div> <div class="col-8"></div> </div> </div>
不工作
<div class="container"> <div class="row"> <div class="myclass"> <div class="col-4"></div> <div class="col-8"></div> </div> </div> </div>
解决方法
这是因为col- *必须直接放在行内.
阅读Bootstrap docs ..
“Content should be placed within columns,and only columns may be
@H_502_20@
immediate children of rows.”这在Bootstrap 4中尤为重要,因为如果不直接放在.row中,列将只是垂直堆叠/包裹.
另请阅读:
How the Bootstrap Grid Works
Bootstrap Rows and Columns – Do I need to use row?
Bootstrap 4.0 Grid System Layout not working