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

【问题标题】：Bootstrap 4 remove margin for element via media queryBootstrap 4通过媒体查询删除元素的边距
【发布时间】：2018-02-23 21:18:18
【问题描述】：

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

在此处查看示例>：

@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>

【问题讨论】：

1. mt-2 已经是原生的 bootstrap 4 类，所以我不明白你为什么要手动添加它。 2. 你希望你的元素看起来像什么？它必须在小屏幕上而不是大屏幕上具有上边距吗？还是反过来？
1.我只为作为桌面的大屏幕添加该元素的边距 2. 在大屏幕中必须有上边距，在小屏幕中必须删除。是否可以通过 mediaquery 删除添加的引导类？
类名未正确提及。类名应以“.”表示在类名之前

标签： twitter-bootstrap bootstrap-4 margin responsive

【解决方案1】：

您可以只使用响应式 mt-lg-2 类而不是 mt-2。

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

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

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

这是一个有效的 sn-p：

<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-* 类组在 Bootstrap 4 中不存在（不再存在）。请改用col-*。

【讨论】：

【解决方案2】：

你为什么提到所有的课程？参考下面的代码。你还没有提到 hovtext 作为类。类应该用'.'表示在类名之前。

即.hovtext{...}

@media (max-width: 991px) {

   .hovtext{
    margin: 0;
  }
}

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

即margin:0 !important;

【讨论】：

【解决方案3】：

你不需要手动声明这个类，因为它已经有断点相关的选项，范围从mt-#到mt-xl-#。因此，根据您的评论，您想要的是在大屏幕上有一个上边距，而在小屏幕上没有。而且你遵循从最小断点到最大断点写入的 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 类中的“md”更改为您想要的任何断点。

【讨论】：