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

Question

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

在此处查看示例>：

@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 class 而不是 mt-2。

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

换句话说，这与添加 classes mt-0 mt-lg-2.

相同

因此，您不需要任何自定义 css 或媒体查询 。本机 Bootstrap 4 class mt-lg-2 旨在完全按照您的意愿行事。 Bootstrap 4 中的间距 classes 已经响应 classes。对于这些简单的任务，您不需要（也不应该）使用任何自定义 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/

此外，重要的是：

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

Answer 2

为什么要提到所有 classes？参考下面的代码。而且您没有提到 hovtext 为 class。 Class 应该用 '.' 表示在 class 名字之前。

即.hovtext{...}

@media (max-width: 991px) {

   .hovtext{
    margin: 0;
  }
}

如果以上代码不起作用意味着将其标记为重要。

即margin:0 !important;

Answer 3

您不需要手动声明 class，因为它已经有 breakpoint-related 个选项，范围从 mt-# 到 mt-xl-#。因此，根据您的评论，您想要的是在大屏幕上有上边距，在小屏幕上有 none。并且您遵循 Bootstrap 从最小断点到最大断点编写的约定，所以它看起来像这样。

    <!-- '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>

如果你需要在更大的断点应用它，只需将mt-md-2 class中的'md'更改为你想要的任何断点。

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

Bootstrap 4 remove margin for element via media query

margin

twitter-bootstrap

bootstrap-4

responsive