我正在尝试将内容卡并排放置在3的位置，每3个内联卡插入新的一行，再加上3个，我尝试设置 flex-wrap: nowwrap;
它可以正常工作，但卡不停地display:inline-block连续运行，不会在每3或4张卡上分成几行，我尝试添加和其他显示设置，但由于某种原因无法正常工作。
这是我使用的HTML和CSS代码，谢谢！
的CSS
#cover {
height: 100%;
text-align: center;
margin: 0 auto;
}
#cover-caption {
width: 100%;
position: relative;
z-index: 1;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
的HTML
<section id="cover" class="min-vh-100">
<div id="cover-caption">
<div class="container">
<div id="content" class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
<div class="px-2">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="recent-tab" data-toggle="tab" href="#recent" role="tab"
aria-controls="recent" aria-selected="true">Recent</a>
</li>
<li class="nav-item">
<a class="nav-link" id="search-tab" data-toggle="tab" href="#search" role="tab"
aria-controls="search" aria-selected="false">Search</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div style="border: none;" class="tab-pane fade show active" id="recent" role="tabpanel"
aria-labelledby="recent-tab">
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3 d-flex flex-row">
<div class="card text-center" style="width: 20rem;">
<img class="card-img-top"
src="https://cdn.pixabay.com/photo/2020/02/08/19/15/winter-4831013_1280.jpg"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wow</h5>
</div>
</div>
</div>
<div class="col-auto mb-3 d-flex flex-row">
<div class="card text-center" style="width: 20rem;">
<img class="card-img-top"
src="https://media.istockphoto.com/photos/colorful-sunset-picture-id1181315370"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Colorful Sunset</h5>
</div>
</div>
</div>
<div class="col-auto mb-3 d-flex flex-row">
<div class="card text-center" style="width: 20rem;">
<img class="card-img-top"
src="https://media.istockphoto.com/photos/snowcapped-winter-landscape-picture-id1181522290"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Snowcapped Winter</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="border: none;" class="tab-pane fade" id="search" role="tabpanel"
aria-labelledby="search-tab">
to do search stuff
</div>
</div>
</div>
</div>
</div>
</div>
</section>
就是这个：
CSS：
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
的HTML：
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card ">
<img class="card-img-top" src="https://media.istockphoto.com/photos/snowcapped-winter-landscape-picture-id1181522290" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" >
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/02/08/19/15/winter-4831013_1280.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>s
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/colorful-sunset-picture-id1181315370" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句