Bootstrap 5 col-sm-6和col md-4不起作用
Bootstrap 5 col-sm-6和col md-4不起作用
提问于 2021-04-07 11:00:40
在小屏幕和中型屏幕中，col sm-6和col sm-4在bootstrap-5中不工作，但在大屏幕上工作正常。我的要求是在小屏幕，我必须显示2个图像和中等屏幕，我必须显示3个图像。在大屏幕上可以显示4个图像，但在小屏幕和中屏幕上显示不正常。我对引导程序是个新手。请帮助解决此问题。
作为参考，请查看附件中的图片
。
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person One</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Two</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Four</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Five</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Six</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Six</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Seven</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Eight</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Nine</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Nine</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2021-04-07 11:59:10
只需在要隐藏或显示d-none d-lg-block d-xl-block d-md-none col-6 col-lg-3 col-xl-3单独div上添加这两行条件即可
d-none d-lg-block d-xl-block d-md-block col-md-4 col-lg-3 col-xl-3
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="d-none d-lg-block d-xl-block d-md-none col-6 col-lg-3 col-xl-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person One</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="d-none d-lg-block d-xl-block d-md-block col-md-4 col-lg-3 col-xl-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Two</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="d-none d-lg-block d-xl-block d-md-none col-6 col-lg-3 col-xl-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person One</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="d-none d-lg-block d-xl-block d-md-block col-md-4 col-lg-3 col-xl-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Two</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="d-none d-lg-block d-xl-block d-md-none col-6 col-lg-3 col-xl-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person One</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="d-none d-lg-block d-xl-block d-md-block col-md-4 col-lg-3 col-xl-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Two</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="single-box">
<div class="img-area"><img src="assets/images/img.jfif"></div>
<div class="img-text">
<h2>Person Three</h2>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66979002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号