在 Bootstrap 4 的小屏幕上隐藏一列 [重复]答案

【问题标题】：Hide a column on smaller screens for Bootstrap 4 [duplicate]在 Bootstrap 4 的小屏幕上隐藏一列 [重复]
【发布时间】：2018-11-24 03:20:46
【问题描述】：

这是一个总是让我对 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 屏幕上？

【问题讨论】：

标签： html css responsive-design bootstrap-4

【解决方案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>

【讨论】：

我当时在：getbootstrap.com/docs/4.0/utilities/display，但无法确定它的正面或反面。您的解决方案似乎工作正常。我也会测试一些。谢谢吉姆
v4.0 或 v4.1 中的相同
好的，它工作正常。我还在使用 jQuery .resize 函数测试我的页面，并且 col-sm-3 被隐藏在 992 左右，下降到 991 像素。事实上，它在文档中。 // 大型设备（台式机，992px 及以上）@media (min-width: 992px) { ... } getbootstrap.com/docs/4.1/layout/overview
“这个问题之前有人问过，已经有了答案”。这是不同的，因为它直截了当。并且很容易理解。虽然 Bootstrap v4 中的 Missing visible-** 和 hidden-** 很可能提供了对所有情况的彻底和详尽的解释，但我仍然遇到了麻烦。如果 SO 的目的是将知识从一个人传达给另一个人，我相信我提出的问题和回答的方式非常清楚。
其实这里还有更多。如果问题是，“我只希望 col-sm-3 出现在 md、lg 和 xl 屏幕上”Dippas 实际上也回答了这个问题！这将是
col-sm-3