代码之家 › 专栏 › 技术社区 › Junior

仅使用引导4在较小屏幕上隐藏列

bootstrap-4 twitter-bootstrap css html

Junior · 技术社区 · 7 年前

我正在尝试创建一个网格,用3列(左、中、右)覆盖整个屏幕

中间:这个专栏应该经常出现。它应该覆盖<=中等尺寸视图。在大视图上为66.6%(8/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 似乎工作不正常。当视图很小但在较大的视图中应该是可见的时,我希望列是隐藏的。

如何更正此问题?

1 回复 | 直到 7 年前

Carol Skelly 7 年前

如中所述 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