logo标签列表

隐藏元素 Bootstrap 4.1

htmlcsstwitter-bootstrapbootstrap-4
4
我正在使用Bootstrap 4.1。我需要仅在移动设备上隐藏某些元素，因此我尝试使用display属性。根据官方文档，我尝试按照建议使用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>
2个回答
3
根据文档，如果想要在只有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>
已解决，标记上有一个错别字。感谢您的建议。 - user9741470
1

d-sm-none会在sm宽度及以上隐藏元素，d-md-block将覆盖此设置，在md宽度及以上显示元素。Sm对应576px及更高的屏幕宽度，因此也许你想要在xs屏幕宽度上隐藏它？

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接