Bootstrap 4 alpha 6 - 行内卡片行为

Question

我正在使用 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（打开全图）

Answer 1

这是网格系统的理想行为。 .row 有一个负边距来抵消网格列的填充，因此最左边和最右边的列与视口的边缘（或 .row 的容器的边缘）正确对齐.此外，虽然存在负边距，但由于每列中的填充，每个网格列的 content 仍在卡片中。

通常，.row 放置在 .container 或 .container-fluid 内，具有 15px 的填充以抵消负边距。 .card-block 确实有填充，但不是 15px，这就是为什么 .card-block 不能将卡片的网格内容与 card.

的边缘完美对齐的原因

所以，我不确定您想要实现什么，但是您可以通过其他两种方式使用 card 中的网格。一种方法是使用 .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>

http://www.codeply.com/go/vE2EdNPQwV

Bootstrap 4 alpha 6 - 行内卡片行为

Boostrap 4 alpha 6 - row inside card behavior

css

bootstrap-4

twitter-bootstrap-4