隐藏元素bootstrap 4.1

Question

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

要隐藏元素，只需使用.d-none类或其中一个.d- {sm，md，lg，xl} -none类来处理任何响应式屏幕变化。要仅在给定的屏幕大小间隔上显示元素，您可以将一个.d - none类与.d - *类组合，例如.d-none .d-md-block .d-xl-none将隐藏所有屏幕尺寸的元素，中型和大型设备除外。

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

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>

Answer 2

d-sm-none将隐藏宽度sm和更大的元素，d-md-block将覆盖此元素并在宽度md和更大的宽度上显示元素。 Sm corrcor对应576px和更高，所以也许你想隐藏它的scren宽xs？