Bootstrap 4 alpha 6 - 行内卡片行为答案

【问题标题】：Boostrap 4 alpha 6 - row inside card behaviorBootstrap 4 alpha 6 - 行内卡片行为
【发布时间】：2017-07-23 08:06:59
【问题描述】：

我正在使用 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>

我不想为卡片的主体使用填充

卡片的构建块是 .card-block。每当您需要卡片中的填充部分时使用它。

但我的网格来自卡片的主体。
是期望的行为还是要修复的错误？

谢谢

JSFiddle（打开全视图）

【问题讨论】：

我相信这实际上是所需的行为 - 如果你会看到该行比它包含左右两边的元素大 15px - 在 .CSS 中你会发现该行有边距-left:-15px 和 margin-right:-15px ... 每边减去 15px，这导致了这种“奇怪”的行为——如果你要删除蓝色边框，你会注意到包含的元素排列得很好[class^="col-"] 元素 - 这是此实例中所需的外观

标签： css bootstrap-4 twitter-bootstrap-4

【解决方案1】：

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

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

所以，我不确定您要达到什么目的，但还有其他 2 种方法可以使用 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

【讨论】：