我正在使用引导程序，我想连续拥有4张卡片，每张卡片占用相同的宽度。但是下面的代码无法正常工作。仅出现3张卡片。看来问题在于，每张卡之间都有很大的余量。您知道如何正确解决此问题吗？
示例：http://jsfiddle.net/h82w46Lz/1/
HTML ：：
<div class="container mt-4">
<div class="row">
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" 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-outline-primary">Read</a>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
关闭前四张卡的行div，并添加“ col-lg-3”类而不是“ col”，然后对后四张卡进行相同的操作。