Bootstrap 4：一旦达到网格系统的断点，如何隐藏列？答案

【问题标题】：Bootstrap 4: How to hide a column once grid system's breakpoint is reached?Bootstrap 4：一旦达到网格系统的断点，如何隐藏列？
【发布时间】：2021-05-08 12:56:22
【问题描述】：

鉴于以下 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 时，它也能工作。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 responsive-design

【解决方案1】：

基于official documentation，您应该像这样使用显示属性实用程序：

<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>

【讨论】：

在查看文档时似乎错过了这一点！谢谢。
不客气。注意实用程序。它们非常有用。