我試圖讓兩張卡并排在一起，但無論我做什么，它們最終都會在彼此下方。我將它們放在同一行，在同一個容器中，但它仍然無法正常作業。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class ="container-fluid">
<div class="row">
<div class ="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>uj5u.com熱心網友回復：
嘗試這個，
一些容器被移除。您的卡片現在每列都在一個列中，并且兩列都在一行內。
col-6將使每個列的寬度為 50%，您可以使用col-1to使它們更薄或更寬col-12。只要您不在CSS 中指定任何卡片尺寸，卡片也會填充該寬度！
添加到影像并洗掉您輸入的樣式大小將使影像保持在列寬，無論螢屏大小如何。
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
您有兩個語法錯誤：
- 一個額外的 div 更接近
</div> - 和額外的身體更接近
</body> - 我添加
到第二張卡片 div - 請注意，通過在第一列上使用強制寬度，在小螢屏上，您可能看不到您設定的第 1 列和第 2 列中的所有影像
col-2。 - 我洗掉了一些
style=并改為創建類（總是嘗試使用 CSS 和類來設定樣式
我們不知道您的 CSS 檔案做了什么，現在這可能會對答案產生負面影響。這是我留下一些我通常不會做的標記的主要原因，例如卡片上文本周圍的容器。
.first-column {
width: 170px;
}
.card-image {
height: 150px;
width: 150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2">
<div class="card first-column">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Second example with standard card use
.card-image.card-img-top {
width: 100%;
height: 150px;
}
.card-img-top {
width: 100%;
}
.card-title {
font-weight: bold;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<body>
<div class="container-fluid">
<div class="d-flex">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/448622.html