如何仅在桌面上使用 Bootstrap 添加负边距

Question

我正在使用 Bootstrap 实用程序类“mb-n15”为图像添加一些负边距，使其位于容器下方：

<div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-12 col-md-5 col-lg-5 order-md-1">

            <div class="w-md-150 w-lg-130 position-relative">

                <!-- Image -->
                <div class="mb-n15">

                    <!-- Image -->
                    <img src="myimage.jpg" class="img-fluid">

                </div>

            </div>

        </div>
    </div>
</div>

在桌面上看起来很棒。但是，在移动设备上，它会与图像下方的一些文本重叠，使其无法阅读。

如何仅在“col-md-5”或“col-lg-5”（及以上，而不是 col-12）尺寸上触发“mb-n15”类？这个想法是使用“引导方式”运行“mb-n15”类，而无需手动编写 CSS 媒体查询。这可能吗？

Answer 1

没有mb-n15 类。有 0 - 5 个单位的 negative margins 类可以响应设置。

例如，如果您想在md 和更大的空间上设置负 5 个间距单位的边距，并且在 xs/sm（移动）上没有负边距，它会是：

     <div class="m-md-n5 m-0">
           <img src="//placehold.it/800x500" class="img-fluid">
     </div>

https://codeply.com/p/bRAStkuS0U