html - 隐藏元素 bootstrap 4.1

Question

我正在开发 bootstrap 4.1。我只需要在移动设备上隐藏一些元素，所以我决定尝试显示属性。根据官方文档，我已按照建议尝试使用 d-sm-none d-md-block 但它不起作用。

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation. To show an element only on a given interval of screen sizes you can combine one .d--none class with a .d--* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

这是代码，任何帮助将不胜感激:

HTML

<div class="row" id="second-row">
        <div class="col-sm-12 col-lg-12">
        <h2 class="text-uppercase" id="section-title">Lorem ipsum</h2>
        </div>
        <div class="col-sm-12 col-lg-6">
             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            <div class="row" id="mini-gallery-row">
                <div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
                <img class="img-fluid w-100" src="img/placeholder.png" alt="" />
                </div>
                <div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
                <img class="img-fluid w-100" src="img/placeholder.png" alt="" />
                </div>
                <div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
                <img class="img-fluid w-100" src="img/placeholder.png" alt="" />
                </div>
            </div>
        </div>

Answer 1

根据文档 https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements ，如果您想“仅在 xs 上隐藏”，请使用 .d-none .d-sm-block。希望它会有所帮助。 :)

即。

<div class="row" id="mini-gallery-row">
    <div class="col-sm-12 col-lg-4 d-none d-sm-block"> <img class="img-fluid w-100" src="img/placeholder.png" alt="" /> </div>
    <div class="col-sm-12 col-lg-4 d-none d-sm-block"> <img class="img-fluid w-100" src="img/placeholder.png" alt="" /> </div>
    <div class="col-sm-12 col-lg-4 d-none d-sm-block"> <img class="img-fluid w-100" src="img/placeholder.png" alt="" /> </div>
</div>