bootstrap4α-6入侵行为中的网格
bootstrap4α-6入侵行为中的网格
提问于 2017-02-25 23:31:47
我已经开始使用新的alpha4 6，只是检查一下，是什么改变了。
如我所见，我可以使用容器、行、列，如3所示。
因此，我刚刚设置了一个非常简单的布局，一个内容>行> col (希望用作容器来添加我的额外设置)、一行和两列。结果很糟糕：https://jsfiddle.net/34prcdou/1/
我读到他们把浮标换成了柔性盒，没关系，我知道柔道盒，但是这个结果令我震惊。我认为这是一个有效的引导布局。
我错过了什么？也许我太累了，看不见树林.
<div class="container">
<div class="row">
<div class="col-xs-12" id="content">
<div class="row">
<div class="col-sm-6 color-1" style="height: 100%">a</div>
<div class="col-sm-6 color-2" style="height: 100%">a</div>
</div>
</div>
</div>
</div>CSS
html {height: 100%;}
body {height: 100%;}
.container:first-child {margin: 0 auto; height: 100%;}
.container:first-child {
-webkit-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
}
#content {border: 1px solid #f00}
.color-1 {background: #CEE5F2}
.color-2 {background: #ACCBE1}
.color-3 {background: #7C98B3}
.color-4 {background: #637081}
.color-5 {background: #536B78}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-26 11:36:42
在Bootstrap 4 Alpha 6中，-xs- infix已被删除。对于全宽度列，请使用col-12而不是col-xs-12。
<div class="container">
<div class="row">
<div class="col-12" id="content">
<div class="row">
<div class="col-sm-6 color-1" style="height: 100%">a</div>
<div class="col-sm-6 color-2" style="height: 100%">a</div>
</div>
</div>
</div>
</div>http://www.codeply.com/go/eiQNFNEZXJ
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42462902
复制相关文章
相似问题
腾讯云开发者
