Bootstrap的两个row的间距用什么实现最科学?

关于这个问题,网上通常给出答案是预设一个

.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全设,于是问题就又绕回来了,见上面加粗的文字。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容