我正在使用bootstrap 4 alpha 6,并注意到在没有卡块的卡体内使用网格时的奇怪行为.
<div class="container">
<h5>
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
</h5>
<h4>
row inside card "body" with class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="row">
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h4>
row inside card "body" without class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="foo">
<div class="row">
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-Box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
我不想在我的卡身上使用填充
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
但是我的网格出了卡片的主体.
是期望的行为还是要修复的错误？
谢谢
JSFiddle(打开全视图)
解决方法
这是网格系统的理想行为. .row具有负边距以抵消网格列的填充,因此最左侧和最右侧的列与视口的边缘(或.row的容器的边缘)正确对齐.此外,虽然存在负边距,但由于每列中的填充,每个网格列的内容仍然在卡内.
通常情况下,.row放置在.container或.container-fluid内部,具有15px填充以抵消负边距. .card-block确实有填充,但它不是15px,这就是.card-block不能将卡的网格内容与卡的边缘完美对齐的原因.
所以,我不确定你想要实现什么,但还有其他两种方法可以使用卡内的网格.一种方法是使用.container-fluid,使外网格列与卡的边缘完美对齐……
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
</div>
另一种是使用无沟槽排(.no-gutters).这将从行中删除负边距,并从所有列中删除填充.然后,每列的内容占据列的整个宽度.
<div class="card">
<div class="row no-gutters">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
