twitter-bootstrap Bootstrap 4 响应间距不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47446225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 responsive spacing not working
提问by Luis Alves
I'm using the classes as defined
我正在使用定义的类
Applies margin to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
使用响应断点 {property}{sides}-{breakpoint}-{size} m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
Meaning that
意思是
<div class="col-12 mb-sm-3"></div>
Should produce a div with margin bottom on small devices, but it doesn't.
应该在小型设备上产生一个边距底部的 div，但它没有。
回答by Luis Alves
I got what is happening. The mb-sm-3 only affects min-width of 576px so in mobile, iphone 6 for instance, min-width is less than 576 so what I needed to do was:
我知道发生了什么。mb-sm-3 只影响 576px 的 min-width 所以在移动设备中，例如 iphone 6，min-width 小于 576 所以我需要做的是：
<div class="col-12 mb-3 mb-sm-0"></div>
This creates a margin bottom of 3 for below sm (xs in the case) and then sm and above get zero.
这会为低于 sm（在这种情况下为 xs）创建 3 的边距底部，然后 sm 及以上得到零。
Thanks for your help.
谢谢你的帮助。
回答by Znaneswar
margin-bottom: 1rem!important;is adding to .mb-sm-3
margin-bottom: 1rem!important;正在添加到 .mb-sm-3
Check this
检查这个
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-sm-3" style="background:blue;height:20px;"></div>
<div>Space above is the margin of the `mb-sm-3`</div>