在 Flexboxgrid 框架中我看到了一个margin
关于类-1rem
的。.row
在小视口中,这会创建容器的小水平滚动。
既然我在其他框架上看到了这种负边距,那么它的目的是什么?内列具有相同数量的填充,相反。
图中红线为.container
,虚线为.row
。顺便说一句,边距仅在右侧可见。
在 Flexboxgrid 框架中我看到了一个margin
关于类-1rem
的。.row
在小视口中,这会创建容器的小水平滚动。
既然我在其他框架上看到了这种负边距,那么它的目的是什么?内列具有相同数量的填充,相反。
图中红线为.container
,虚线为.row
。顺便说一句,边距仅在右侧可见。
因为您应该将它们与列结合使用。
列通常有一个padding
将它们的内容推离边界,以使其看起来更好。但是,当您在列中嵌套列时,内容会不断向内推,这通常不是预期的效果。为了防止这种情况发生,行有一个负边距,这会将列拉回来。在您的情况下,您似乎需要在 scol-xs-12
内的列组周围添加 a row
。这将防止内容被拉得太远。
在这里查看一个很好解释的介绍。
.row
这是该类如何工作的演示:
.col1 {
background: red;
}
.col2 {
background: green;
}
body {
font-family: sans-serif;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">
<div class="row">
<div class="col-xs-12
col1">
<div class="col-xs-12
col2">
<div class="box">Without a row</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12
col1">
<div class="row">
<div class="col-xs-12
col2">
<div class="box">With a row</div>
</div>
</div>
</div>
</div>
一般row
是放在container
. container
有填充15
和row
有边距-15