在特殊条件下运行一段 bootstrap 5 代码
Runnig a block of bootstrap 5 code in special Conditions
我想 运行 当 window 宽度为 500 像素或更大时,此代码和 运行 当宽度为 499 像素或更小时,另一个代码块。我该怎么做
500 像素或更多:
<div class="card text-center d-inline-block m-2" style="width: 13rem;" >
<img src=".." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" style="font-size: 1rem;">name</h5>
<p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
<a href="#" class="btn btn-primary" style="font-size: 0.9rem;">watch</a>
</div>
</div>
499 或更少:
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
您必须将它们都包含在每个 div
中,这将根据视口大小有条件地呈现。
对于 <= 499px 的 div
,您需要将整个部分包含在:
<div class="d-md-none">
</div>
对于 >=500px 的 div
,您需要将整个部分包含在:
<div class="d-none d-md-block">
</div>
我想 运行 当 window 宽度为 500 像素或更大时,此代码和 运行 当宽度为 499 像素或更小时,另一个代码块。我该怎么做
500 像素或更多:
<div class="card text-center d-inline-block m-2" style="width: 13rem;" >
<img src=".." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" style="font-size: 1rem;">name</h5>
<p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
<a href="#" class="btn btn-primary" style="font-size: 0.9rem;">watch</a>
</div>
</div>
499 或更少:
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
您必须将它们都包含在每个 div
中,这将根据视口大小有条件地呈现。
对于 <= 499px 的 div
,您需要将整个部分包含在:
<div class="d-md-none">
</div>
对于 >=500px 的 div
,您需要将整个部分包含在:
<div class="d-none d-md-block">
</div>