Bootstrap 4 alpha 6 - 卡片内的行为问题

Question

我正在使用Bootstrap 4 Alpha 6，发现在卡片的正文中使用网格（grid）时出现了奇怪的行为，但没有使用card-block。

<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>

我不想为卡片的主体使用填充(padding)。

卡片布局的基本组成部分是.card-block。每当您需要在卡片内创建一个填充区域时，请使用该类(class)。

但我的网格(grid)超出了卡片的主体(body)。
这是期望的行为还是需要修复的错误？

谢谢！

JSFiddle （打开完整视图）

- Paolo Rossi

---

我相信这实际上是期望的行为 - 如果您注意到该行比其包含元素每侧左右大15像素 - 在.CSS中，您会发现该行具有margin-left：-15px和margin-right：-15px ...每侧减去15像素导致了这种“奇怪”的行为 - 您会注意到，如果从[class ^ =“col-”]元素中删除蓝色边框，则包含的元素将排列得非常好 - 这是在这种情况下所期望的外观。 - Neil Kelsey

Answer 1

这是网格系统的预期行为。 .row 具有负边距，以抵消网格列的填充，使最左侧和最右侧的列与视口（或.row 的容器的边缘）对齐。此外，在存在负边距时，每个网格列的内容仍在卡片内部，因为每个列都有填充。通常， .row 放置在具有15px填充以抵消负边距的 .container 或 .container-fluid 中。 .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

- Zim