我希望“標題”在“第一個是”的正上方開始，影像也應該從那里開始
我嘗試了幾種方法（和一些課程），但我沒有成功
卡號：
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block">
{{cosos}} title
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
我所有的東西都使用Bootstrap 5，我沒有自己的類或樣式
uj5u.com熱心網友回復：
您可以利用 bootstrap 的網格布局來對齊元素。
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<div class="row">
<div class="col-3">
</div>
<div class="col-2">
<img src="/assets/logo.gif" alt="" width="60" height="48" >
</div>
<div class="col-7">
<span id="title1"> fdasdstitle</span>
</div>
</div>
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
第 1 步：洗掉 classjustify-content-center并p-2在 class 后添加card-title。現在您將看到您的 logo.gif 和標題將與第一個導航欄專案對齊。
第 2 步：將place-self: center;class添加到 div 中card-body。
第 3 步：分配background-color: #706747;給 class card，從card-bodydiv 中洗掉。
更新后的 HTML 將如下所示：
<div class="card border-dark" style="background-color: #706747;">
<div class="card-body" style="place-self: center;">
<h1 class="card-title p-2">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block"> {{cosos}} title
</p>
</h1>
<div class="d-flex flex-nowrap bd-highlight ">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395761.html
標籤：html css bootstrap-4 bootstrap-5 乙肝
下一篇：用逗號將值拆分為HTML中的新行