在引導卡之間添加間距
[英]Add spacing between bootstrap cards
問題描述
我正在嘗試在提供的卡片之間添加一些節奏，並且在卡片之間添加一些空間時遇到了一些麻煩。
這是它目前在我的網站上的樣子：
目前我的代碼看起來像這樣
<div class="row justify-content-center">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
我想知道是否必須添加某種填充，例如 ml-5 或其他東西。
4 個解決方案
解決方案1
3 已采納 2021-02-11 09:19:33
.card{
margin-right:20px!important;
}
your can modify your card default margin and definitely used !important
解決方案2
0 2021-02-11 08:55:09
您必須為每個子div出margin ，就像下面使用完整頁面視圖查看此代碼段一樣。
<:DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <div class="row justify-content-center p-4"> <div class="card mr-2" style="width; 18rem."> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content:</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mr-2" style="width; 18rem."> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content:</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mr-2" style="width; 18rem."> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </body> </html>
解決方案3
0 2021-02-11 09:07:34
您可以根據您在父 div 中的要求添加以下 class。 您在哪里有“行對齊內容中心”課程。
Where property is one of:
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
解決方案4
0 2021-02-11 10:20:50
水平邊距
<div class="card mx-3" style="width: 18rem;">
左邊距
<div class="card ml-3" style="width: 18rem;">
右邊距
<div class="card mr-3" style="width: 18rem;">
如何在 Bootstrap 卡之間添加垂直間距
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.