如何仅在桌面上使用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>

它在台式机上看起来很棒。然而，在移动设备上，它会重叠图像下面的一些文本，使其无法阅读。

如何才能仅在“or md-5”或“or lg-5”(以及以上，不是or 12)大小上触发"mb-n15“类？这个想法是使用"Bootstrap方式“运行"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