仅使用 Bootstrap 4 在小屏幕上隐藏列

Question

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

1. 左：此列应仅显示在大视图中，且应占屏幕的 16.6% (2/12)
2. 中间：此列应始终显示。它应该在 <= 中等大小的视图中覆盖 75% (9/12) 的屏幕。66.6% (8/12) 的大视图
3. 右：此列应始终显示。它应该在大视图上覆盖 16.6% (2/12) 的宽度，在 <= 中型视图上覆盖 25% 3/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

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

我该如何解决这个问题？

Answer 1

如Bootstrap v4中缺少 visible-** 和 hidden-** 中所述...

如果你想要 lg 和 up 上的 LEFT，那就是：d-none d-lg-block.

如果你想在LG左只有这将是：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