<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="images/5.png" class="img-fluid">
</div>
<div class="col-8 bg-primary text-white text-center">
<div class="mx-auto">
<h1>AMAZING DANCE</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Corrupti perferendis cumque a provident? Ipsam, architecto?</p>
<a href="#" class="btn btn-dark btn-lg">READ MORE</a>
</div>
</div>
</div>
</div>
所以我試圖將文本垂直和水平居中，并且我想洗掉間距。我究竟做錯了什么？
它看起來像這樣：
uj5u.com熱心網友回復：
mx-auto實用程式類是一種快捷方式，margin: 0 auto其設計使內容僅水平居中。到中心內容最簡單的方法是使用d-flex與組合justify-content-center和align-items-center。由于 flex 將其上級顯示為行內，因此您必須另外將它們包裝在另一個容器中：
<div class="container-fluid">
<div class="row">
<div class="col-4">test</div>
<div class="col-8 bg-primary text-white text-center">
<div class="d-flex justify-content-center align-items-center h-100">
<div>
<h1>AMAZING DANCE</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
Corrupti perferendis cumque a provident? Ipsam, architecto?
</p>
<a href="#" class="btn btn-dark btn-lg">READ MORE</a>
</div>
</div>
</div>
</div>
</div>
h-100 是否只能將容器拉伸到所有可用高度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339169.html
標籤：推特引导
上一篇：如何將搜索表單放在導航欄中間并在Bootstrap5中展開它
下一篇：如何在引導程式5中將卡片居中