僅使用 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