Question

我正在尝试创建一个网格以覆盖全屏的3列（左，中，右）

左：此列应仅在大视图上显示，并且应为屏幕的16.6％（2/12）
中间：此列应始终显示。在<=中型视图上，它应覆盖屏幕的75％（9/12）。大视图占66.6％（8/12）
右：此列应始终显示。大视图应覆盖宽度的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

如Missing visible-** and hidden-** in Bootstrap v4中所述...

如果要在lg或更高版本上向左移动，则应为：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

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

1 个答案: