我正在使用 bootstrap 为其网站上的卡片提供的代码,但似乎无法将卡片居中对齐到我的页面而不对齐卡片中的文本。
这就是我现在拥有的 --> https://i.imgur.com/f06m0Qc.png
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
我想要实现的风格是这样的 --> https://i.imgur.com/PaonbTR.png
现在不担心样式,因为我可以在 CSS 中更改它。
将您的代码放入一个 div 并添加一个类名,例如“居中”您的 CSS 可能如下所示:
.centered {
margin-right:auto;
margin-left:auto ;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句