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

在这种情况下，您必须使用display utilities classes：

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>

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

1 个答案: