Bootstrap 4响应间距不起作用

Lui*_*ves 17 spacing twitter-bootstrap bootstrap-4

我正在使用定义的类

使用响应断点对元素应用边距{property} {sides} - {breakpoint} - {size} m(t,b,r,l,x,y) - (sm,md,lg,xl) - (0, 1,2,3,4,5)

意思是

<div class="col-12 mb-sm-3"></div>
Run Code Online (Sandbox Code Playgroud)

应该在小型设备上产生带底边的div,但事实并非如此.

Lui*_*ves 32

我得到了正在发生的事情.mb-sm-3仅影响576px的最小宽度,因此在移动设备中,例如iphone 6,最小宽度小于576,所以我需要做的是:

<div class="col-12 mb-3 mb-sm-0"></div>
Run Code Online (Sandbox Code Playgroud)

对于低于sm(在这种情况下是xs),这会创建一个3的边距底部,然后sm和以上为零.

谢谢你的帮助.

  • 在Bootstrap的部分看起来完全违反直觉. (7认同)
  • 我认为这叫做移动优先方法 (4认同)
  • 只是想为研究 Bootstrap 网格系统的人补充这一点。Bootstrap 使用移动优先的方法,这意味着他们设计的所有内容就像在手机上设计一样,并且当您逐渐增加屏幕宽度时,它会适应。在这种情况下,您需要先设置移动设备屏幕宽度的边距,然后随着屏幕尺寸的增加,您可以调整边距。 (4认同)