Bootstrap 4：到达网格系统断点后如何隐藏列？

Question

给定以下 BS4 布局，一旦到达断点，如何使第 3 列消失而不是堆叠在视口的底部。

<div class="container-fluid">
  <div class="row">
    <div id="col1" class="col-md-3">
      I am Column 1
    </div>           
    <div id="col2" class="col-md-4">
        I am Column 2
    </div>
    <div id="col3" class="col-md-5">
        I am Column 3, I should disappear once the breakpoint is reached!
    </div>
  </div>
</div>

使用 vanilla CSS，我会做这样的事情：

@media only screen and (max-width: 600px) {
  #col3 {
    display: none;
  }
}

但是，我想要一个即使我决定将最小宽度更改为sm,lg或 ，也能正常工作的解决方案xl。

Answer 1

根据官方文档，您应该像这样使用 Display Property Utilities：

<div id="col3" class="col-md-5 d-sm-none d-md-block">
    I am Column 3, I should disappear once the breakpoint is reached!
</div>