在 Bootstrap 4 的小屏幕上隐藏一列

Question

这是一个总是让我对 Bootstrap 4 感到困惑的领域

假设你有这个布局：

  <div class="container-fluid">     
   <div class="row">
     <div class="col-sm-3">col-sm-3</div>
     <div class="col-sm-9">col-sm-9</div>
   </div>
  </div>

什么课你分配（最有可能的col-sm-3），使得col-sm-3隐藏于：xs，sm和md？

换句话说，只是要清楚，我只希望col-sm-3到出现在lg与xl屏幕？

Answer 1

在这种情况下，您必须使用显示实用程序类：

d-none d-lg-block: 隐藏在小于 lg 的屏幕上

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">     
   <div class="row">
     <div class="col-sm-3 d-none d-lg-block">col-sm-3</div>
     <div class="col-sm-9">col-sm-9</div>
   </div>
  </div>