問題是我的 css 卡是重疊的，我需要三張卡彼此之間有空間，同時水平并排坐著。我也在使用引導程式，并在網上看到了一個使用 float-left float-right 將影像并排放置的解決方案，但是到目前為止，當我重繪 它時，這對我的 html 頁面沒有影響。
.container {
width: 4000px;
margin: auto;
}
.card-white {
background: white;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
border-radius: 50px;
width: 400px;
text-align: center;
padding: 24px;
margin: 20px;
}
.card-white img {
width: 360px;
height: 360px;
object-fit: cover;
border-radius: 4px;
}<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-left">
<h3>Film Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-center">
<h3>Monologue Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-right">
<h3>Voice reel</h3>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
你正在做的很多事情都可以通過直接的 Bootstrap 來完成，而無需外部 CSS。您始終可以使用 CSS 來覆寫行內和外部引導程式（您將在此代碼中看到兩者的用法以用于演示目的）。我建議閱讀 Bootstrap 檔案，因為有很多特定的類可以幫助您實作目標并保持回應能力，而不必擔心會發生這種情況，當然，您可以隨時覆寫 Bootstrap 提供的任何內容如果它不能完全滿足您的需求，請使用 CSS。您的代碼中還有其他專案可以用 Bootstrap 類替換和重新格式化，但我不想重寫所有內容。
https://getbootstrap.com/docs/5.0/utilities/flex/ https://getbootstrap.com/docs/5.0/utilities/spacing/
.card-white {
background: white;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
border-radius: 50px;
text-align: center;
margin: 0.5rem auto 0 auto;
}
.card-white img {
width: 100%;
height: 100%;
}
/* if you don't want to do it inline
h3 {
font-size: 1.2rem !Important;
}
*/<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<!-- Body -->
<div class="container-fluid">
<div class="d-flex flex-row justify-content-center gap-3 flex-wrap">
<div class="col-md-3">
<div class="card-white p-4">
<img src="https://via.placeholder.com/200.jpg">
<h3 style="font-size: 1.2rem">Film Showreel</h3>
</div>
</div>
<div class="col-md-3">
<div class="card-white p-4">
<img src="https://via.placeholder.com/200.jpg">
<h3 style="font-size: 1.2rem">Monologue Showreel</h3>
</div>
</div>
<div class="col-md-3">
<div class="card-white p-4">
<img src="https://via.placeholder.com/200.jpg">
<h3 style="font-size: 1.2rem">Voice reel</h3>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
錯誤在您的 CSS 代碼中。
如果您在沒有 css 的情況下運行它，它會完美運行。
首先，您不需要像這樣在引導程式中自定義容器大小：
.container {
width: 4000px;
margin: auto;
}
其次，固定大小不能像這樣回應：
.card-white {
width: 400px;
}
.card-white img {
width: 360px;
}
所以試試不固定大小。
您可以在沒有 css 的情況下管理它，只有在您的 div 中使用引導類。
<div class="col-xs-12 col-sm-6 col-md-3">
檢查這個，對于引導程式 4：
使用我們的回應式浮動實用程式在任何元素上切換浮動，跨越任何斷點。
Spacing，Bootstrap 包括各種速記回應邊距和填充實用程式類來修改元素的外觀。
檢查這個，對于引導程式 5：
浮動引導程式 5
間距引導程式 5
uj5u.com熱心網友回復：
使用 flexbox 可能是更好的方法： https ://coder-coder.com/display-divs-side-by-side/
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
} bootstrap可以參考：https : //getbootstrap.com/docs/4.0/utilities/flex/。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/495343.html
上一篇：android.content.res.Resources$NotFoundException：可繪制的compat_splash_screen_no_icon_background資源ID#0x7f