在 Bootstrap 中創建頁腳的最佳方法是什么，其中螢屏中間（水平）是兩行文本，螢屏末尾（水平）是一行文本，但垂直居中？
我嘗試使用列和偏移列創建頁腳 - 但這是最??好的方法嗎？另外我不知道如何使一條線居中。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end">
<div class="m-0">One Line Centered</div>
</div>
</div>
</div>
</footer>uj5u.com熱心網友回復：
編輯：
在現代瀏覽器中執行此操作的正確方法是使用 Flexbox。
有關詳細資訊，請參閱此。
我正在更新我的代碼：- [我在每個 div 中添加一個邊框以清除您的期望]
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style> div{ border: 1px solid green;} </style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end" style="display: table; overflow: hidden;">
<div class="m-0 text-center" style="display: table-cell; vertical-align: middle;">One Line Centered</div>
</div>
</div>
</div>
</footer>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421163.html
標籤：
上一篇：側邊欄切換背景不透明度未關閉