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>

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

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

但是，我想要一个即使在我决定将最小宽度更改为 sm、lg 或 xl.[=16= 的情况下也能正常工作的解决方案]

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