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

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

卡的构建块是.card-block.无论何时需要卡片中的填充部分,请使用它.

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

谢谢

JSFiddle(打开全视图)

Answer 1

这是网格系统的理想行为.的.row具有负余量抵消网格列的填充,使得最左和最右列具有与视口的边缘(或边缘适当对准.row的容器).此外,虽然存在负边距,但由于每列中的填充,每个网格列的内容仍然在卡内.

通常情况下,将.row其放置在具有15px填充的内部.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