我有三张卡片，我想在8列内固定，并在右边留一个10像素的空白处。
这是密码
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="col-md-8">
<div class="top_stories row">
<div class="card col-md-4 " >
<img class="card-img-top" src="https://picsum.photos/536/354" 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 col-md-4 " >
<img class="card-img-top" src="https://picsum.photos/536/354" 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 col-md-4 cw" >
<img class="card-img-top" src="https://picsum.photos/536/354" 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>
</div>
<div class="col-md-4">
<p>hello world</p>
</div>
</div>
我有10px的余量使用这个代码
.card{
margin-right: 10px !important;
}
这是小提琴https://jsfiddle.net/s017mn4d/
有没有一种方法我可以使用适合3个相等的卡宽度内8列？。
您应该在.col-md-4div中使用.card。 我还为COL-MD-4添加了padding-right:0和padding-left:0。 因为默认情况下它有15px左右填充。
null
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
margin-right: 10px !important;
}
/* added */
.col-md-4 {
padding-right: 0 !important;
padding-left: 0 !important;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="col-md-8">
<div class="top_stories row">
<div class="col-md-4">
<div class="card ">
<img class="card-img-top" src="https://picsum.photos/536/354" 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>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/536/354" 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>
<div class="col-md-4">
<div class="card cw">
<img class="card-img-top" src="https://picsum.photos/536/354" 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>
</div>
</div>
<div class="col-md-4">
<p>hello world</p>
</div>
</div>