如何使用 Bootstrap 添加這兩行？我正在嘗試制作這樣的標題。頂部和底部兩側都有兩個空白邊框的 TITLE。可以用 Bootstrap 制作嗎？我是一個菜鳥哈哈。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<hr class="bg-danger border-2 border-top border-danger">
<div class="h1">HEADER</div>
<hr class="bg-danger border-2 border-bottom border-danger">
</div>
uj5u.com熱心網友回復：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="flex-fill border-top border-2 border-danger h1"></div>
<div class="h1 text-center">HEADER</div>
<div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>uj5u.com熱心網友回復：
顯示選項允許使用子元素flex自動對齊文本的左右對齊。flex-grow: 1在圍繞第三個的兩個元素上使用它也會使第三個居中。您可以在其中一個正在增長的寬度上指定寬度以獲得偏移標題。
請注意，引導程式“行”類也使用 display: flex.
像往常一樣通過應用 s 來移動邊框以margin-top微調它們的垂直對齊方式。為對齊的邊框保留相同的元素高度（例如，在兩者上使用 h1 以應用相同的高度）。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="flex-fill border-top border-2 border-danger h1"></div>
<div class="h1">HEADER</div>
<div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>uj5u.com熱心網友回復：
您可以使用flex layout和margins接近。由于標題元素的行高，可能需要進行一些調整。
body {
padding: 30px;
}
.h1.lh-min {
line-height: 24px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="d-flex">
<hr class="bg-danger border-2 border-top border-danger flex-grow-1 align-self-start m-0 mt-1">
<div class="h1 lh-min m-0">HEADER</div>
<hr class="bg-danger border-2 border-bottom border-danger flex-grow-1 align-self-end m-0">
</div>uj5u.com熱心網友回復：
我在 2 個跨度標簽之間使用了一個 h1，并將 h1 的大小設定為 12 個中的 3 個
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<span class="col border-top border-5 border-dark"></span>
<h1 class="col-3 text-center">HEADER</h1>
<span class="col border-bottom border-5 border-dark"></span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429609.html