如何以依赖于分辨率的响应方式使用 Bootstrap mb- mt-？答案

【问题标题】：How to use Bootstap mb- mt- in resolution dependent, responsive way?如何以依赖于分辨率的响应方式使用 Bootstrap mb- mt-？
【发布时间】：2022-01-24 08:43:45
【问题描述】：

上下文

我有一个<div class="mt-5 mb-5">。在桌面分辨率中，我在 Chrome 开发工具中看到的边距为 72 像素，效果样式来自 Bootstrap：margin-bottom: 4.5rem!important; 这在视觉上看起来不错。

如果我在 Chrome 开发工具中切换到移动设备尺寸，比如 iPhone 6，然后刷新页面，div 的边距仍然是 72px，在这个解决方案中会有多大。

问题

我想在此分辨率中缩小边距，同时在桌面分辨率中保持 72 像素。我怎样才能做到这一点，最好以引导支持的方式？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

您可以将断点与这些实用程序类结合使用。

class="mt-lg-1 mt-md-4" 有效，它将 lg 的 margin-top 设置为 1，将 md 设备的 margin-top 设置为 4

Check the documentation 了解更多信息

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

【讨论】：