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>

我不想在我的卡身上使用填充

卡片的构建块是.card-block。无论何时需要卡片中的填充部分，都可以使用它。

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

谢谢

JSFiddle（打开全视图）

Answer 1

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

通常情况下，.row位于具有15px填充的.container或.container-fluid内以抵消负边距。 .card-block确实有填充，但它不是15px，这就是为什么.card-block无法将卡的网格内容与card的边缘完美对齐。< / p>

因此，我不确定您要尝试实现的目标，但还有其他两种方法可以在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

Boostrap 4 alpha 6 - 行内卡行为

1 个答案: