仅使用 Bootstrap 4 在较小的屏幕上隐藏列答案

【问题标题】：Hide column on smaller screens only with Bootstrap 4仅使用 Bootstrap 4 在较小的屏幕上隐藏列
【发布时间】：2018-11-07 06:50:05
【问题描述】：

我正在尝试创建一个网格，用 3 列（左、中、右）覆盖整个屏幕

左：此列应仅显示在大视图上，并且应占屏幕的 16.6% (2/12)
中间：此列应始终显示。它应该覆盖
正确：此列应始终显示。它应该覆盖大视图宽度的 16.6% (2/12) 和

这是我的 html 标记

<div class="container-fluid">

    <div class="row">

        <div class="col-lg-2 d-md-none bg-dark text-white">
            <h1>LEFT</h1>
            <p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
        </div>
        <div class="col-lg-8 col-md-9 bg-danger text-white">
            <h1>MIDDLE</h1>
            <p>This column should always show up. it should cover 75% (9/12) of the screen on &lt;= mid-size view. And 66.6% (8/12) on a large views</p>
        </div>
        <div class="col-lg-2 col-md-3 bg-warning">
            <h1>RIGHT</h1>
            <p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on &lt;= mid-size view</p>
        </div>
    </div>

</div>

这是我的代码https://www.codeply.com/go/LRlYKLav32的codeply

d-md-none 类似乎无法正常工作。我希望当视图很小但应该在较大的视图上可见时隐藏该列。

我该如何解决这个问题？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

正如Missing visible-** and hidden-** in Bootstrap v4...中所解释的...

如果您想要 lg 及以上的 LEFT，它将是：d-none d-lg-block。

如果你想要 lg only 上的 LEFT，那就是：d-none d-lg-block d-xl-none

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 d-none d-lg-block bg-dark text-white">
            <h1>LEFT</h1>
            <p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
        </div>
        <div class="col-lg-8 col-md-9 bg-danger text-white">
            <h1>MIDDLE</h1>
            <p>This column should always show up. it should cover 75% (9/12) of the screen on &lt;= mid-size view. And 66.6% (8/12) on a large views</p>
        </div>
        <div class="col-lg-2 col-md-3 bg-warning">
            <h1>RIGHT</h1>
            <p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on &lt;= mid-size view</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/PrAVeQSgb4

【讨论】：