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或媒体查询.本机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-*类组中不自举4(再)存在.请col-*改用.