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

Question

我试图在使用移动屏幕时通过 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>

Answer 1

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

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

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

因此，您不需要任何自定义 CSS 或媒体查询。 native 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/

此外，重要的是:

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