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？

隐藏元素bootstrap 4.1

2 个答案: