Question

我正在尝试使用移动屏幕删除我在nav-link元素中通过CSS中的媒体查询添加的边距mt-2，但无法实现。我可能错误地调用了这个类。

参见此处示例＆gt;：

@media (max-width: 991px) {

   .nav-link hovtext p-1 mt-2 a{
    margin: 0;
  }
}

    <div class=" col-xs-12 col-sm-8 col-md-4   d-flex clearfix">
          <nav class="nav flex-column footerstyle">
            <a class="nav-link hovtext p-1 mt-2" href="#">Términos de uso</a>
            <a class="nav-link p-1" href="#">Políticas de privacidad</a>
            <a class="nav-link p-1" href="#">Socios</a>
            <a class="nav-link p-1" href="#">Confianza y Seguridad</a>
          </nav>
        </div>

Answer 1

您只需使用自适应mt-lg-2课程而不是mt-2。

这将为大（lg）或更大的屏幕（即从992px开始的屏幕）添加上边距。对于较小的屏幕，它将默认为零利润。

换句话说，这与添加类mt-0 mt-lg-2相同。

因此，您不需要任何自定义css或媒体查询。本机Bootstrap 4类mt-lg-2旨在完成您要执行的操作。 Bootstrap 4中的间距类已经是响应类。您不需要（也不应该）使用任何自定义css来执行这些简单任务。

这是一个工作片段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-sm-8 col-md-4 d-flex clearfix">
    <nav class="nav flex-column footerstyle">
        <a class="nav-link hovtext p-1 mt-lg-2" href="#">Términos de uso</a>
        <a class="nav-link p-1" href="#">Políticas de privacidad</a>
        <a class="nav-link p-1" href="#">Socios</a>
        <a class="nav-link p-1" href="#">Confianza y Seguridad</a>
    </nav>
</div>

参考：

https://getbootstrap.com/docs/4.0/utilities/spacing/

另外，重要的是：

Bootstrap 4（不再）中不存在col-xs-*类组。请改用col-*。

Answer 2

为什么你要提到所有课程？参考下面的代码。你没有提到hovtext作为类。课程应以＆＃39;表示。＆＃39;在班级名称之前。

即.hovtext{...}

@media (max-width: 991px) {

   .hovtext{
    margin: 0;
  }
}

如果上述代码不起作用，则将其标记为重要。

即。 margin:0 !important;

Answer 3

您不需要手动声明该类，因为它已经有与断点相关的选项，范围从mt-#到mt-xl-#。所以你想要的是，你的评论是在大屏幕上有一个上边距而在小屏幕上没有。并且遵循从最小断点到最大断点的Bootstrap约定，所以它看起来像这样。

＆＃13;

    <!-- 'mt' for the smallest breakpoint (xs) and mt-md for anything with a
        larger size than equal a medium-sized screen (md) -->
    <div class=" col-xs-12 col-sm-8 col-md-4 d-flex clearfix">
        <nav class="nav flex-column footerstyle">
            <a class="nav-link hovtext p-1 mt-0 mt-md-2" href="#">Términos de uso</a>
            <a class="nav-link p-1" href="#">Políticas de privacidad</a>
            <a class="nav-link p-1" href="#">Socios</a>
            <a class="nav-link p-1" href="#">Confianza y Seguridad</a>
        </nav>
    </div>

＆＃13;

如果您需要将它应用于更大的断点，只需更改“md”即可。在mt-md-2类中，无论你想要哪个断点。

Bootstrap 4通过媒体查询删除元素的边距

3 个答案: