我想在桌面设备上设置每行 3 张 w-50 卡的网格,在较小的设备上每行一张卡。
但是,如果用户响应性地使浏览器窗口变小,我希望卡片在桌面上保持相同的宽度,并且它们之间的空间变小,而不是卡片本身变窄。
此外,是否可以将卡在台式机上设为 w-50,而在较小的设备上设为 w-75。
示例代码:
<div class="row">
<div class="col-sm-12 col-lg-4 " >
<div class="card w-50 ">
<div class="card-header">
Featured
</div>
<div class="card-body ">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4 ">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
如果您希望卡片在用户调整窗口大小时保持不变,我认为不可能使用.w-*
,因为整行的相对百分比宽度为 100%。除非您允许行溢出,否则卡片将随着用户调整窗口大小而缩小。
出于同样的原因,我不知道您为什么/如何想到w-50
在桌面设备上可以连续使用 3张卡。w-50
您可以连续拥有的最大卡片数量仅为 2:100% / 50% = 2。
为了让卡片尽可能保持相同的宽度,您可能必须使用绝对单位,例如px
或rem
。
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
请注意您需要在此处执行,因为默认情况下<div>
设置为 100% 宽度。您可以为每张卡片添加边距以使它们看起来不错:
.cards .card {
margin-bottom: 1rem;
}
我将较大的设备视为 576px 和大。您可以在那里设置媒体断点并.cards
显示为 flexbox。并为里面的卡片设置了一个固定的。
@media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 13rem;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/24/
不过,设置正确的卡片宽度很棘手。我的 2 美分:您可能希望为不同的断点设置正确的卡片宽度,以便卡片之间不会有太多空间。
要强制卡片的宽度为 50% 并在一行中有 3 张,该行必须溢出。默认情况下,如果没有足够的空间,flexbox 子项将缩小。要强制使用 50% 宽度,您必须通过设置将其关闭flex-shrink: 0;
:
@media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 50%;
flex-shrink: 0;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/26/
但是在这种情况下,您不可能在卡片之间仍然存在间隙。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句