Bootstrap 4是否有移动端间距工具类？如何为按钮应用mt-xs-2？

首先明确回答：Bootstrap 4不提供m-xs-*这类带xs前缀的间距工具类，但这完全不影响你给移动端设置间距——因为它的断点规则设计里，xs是默认生效的基础断点，不需要额外加前缀。

为什么找不到m-xs-*类？ #

Bootstrap 4的断点系统中，xs是最小的断点（对应屏幕宽度<576px），所有不带断点前缀的间距工具类（比如mt-2、p-3），默认就会在xs及所有更大的屏幕上生效。而带sm-、md-、lg-、xl-前缀的类，是从对应的断点开始才会生效（或者覆盖基础样式）。官方文档里说“适用于从xs到xl的所有断点”，其实是指每个断点的规则都被覆盖到，而非每个断点都有带前缀的类——xs的规则就是通过无前缀类实现的。

如何给按钮应用类似mt-xs-2的效果？ #

• 如果你只是想在移动端（xs断点）给按钮加上margin-top，并且希望在更大屏幕上保持这个间距，直接用mt-2就可以了，它默认在xs及以上屏幕都生效。
• 如果你希望这个margin-top只在xs断点生效，在sm及更大屏幕上取消这个间距，可以结合断点前缀类实现：

  <button class="btn btn-primary mt-2 mt-sm-0">示例按钮</button>
  

  这里mt-2在xs时生效，mt-sm-0从sm断点（≥576px）开始覆盖掉mt-2的样式，实现移动端独有间距的效果。

额外验证 #

你去看Bootstrap 4的源码会发现，间距工具类的生成逻辑是：针对xs断点直接生成无前缀的类，从sm断点开始才会生成带对应断点前缀的类，所以源码里确实找不到m-xs-*相关的定义，这是框架的设计逻辑，不是bug。

内容的提问来源于stack exchange，提问作者mahan