关于这个问题,网上通常给出答案是预设一个
.mt-15 {margin-top: 15px;}
.mb-15 {margin-bottom: 15px;}
然后根据需要给row加class。
但是从国外开发者做的bs模板来看,通常他们不会给row加margin
,而是给row里面的小区块设置margin
。我认为,国外开发者这种思路的道理是:
row与row之间不应该设间距,视觉上的间距应该由内部的小区块来产生,因为row表示行容器,不应该带样式。row里面的小区块可能有很多,比如有四个列表区块竖排,这时候,如果给这些列表设置统一的margin-bottom
,那么第一、二、三个列表的margin-bottom
会撑开两个列表中间的距离,第四个列表的margin-bottom
会从视觉上撑开本row跟下面row的距离,就实现了小区块之间有间距,row之间也有间距。
然后,我们看看中国网友的建议,即:给row设margin-bottom
,row内部的小区块拉开间距也用margin-bottom
。由于margin叠加现象,row内最后一个小区块的下方的视觉间距就等于自身的margin-bottom
与 row的margin-bottom
的高的那个值。
对比一下可以看到,row上设间距其实是废的,没什么用。
所以,总结一下:
- 如果你就是想要row跟row之间的间距,比小区块之间的间距大,那么就给row内的col内专门放一个容器,给它设上大的
margin-bottom
,小区块设置小的margin-bottom
。 - 如果你不需要row之间有更明显的间距,那么不要专门放个容器。
- 可能你依然会说,如果row里面只有一个小区块,给row设个
margin
有啥不行?不行的原因是:row本身的语义是表示行,这个语义表示的是一个区域概念,而不是样式概念。所以应该优先给里面的小区块设置margin-bottom
,保持row本身的代码干净、统一。如果用F12工具检查row,应该是没有上下间距才对。也就是说,如果给row设margin-bottom
,那么就应该所有row全设,于是问题就又绕回来了,见上面加粗的文字。