css – Boostrap 4 alpha 6 – 行内卡行为

前端之家收集整理的这篇文章主要介绍了css – Boostrap 4 alpha 6 – 行内卡行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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(打开全视图)

解决方法

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

通常情况下,.row放置在.container或.container-fluid内部,具有15px填充以抵消负边距. .card-block确实有填充,但它不是15px,这就是.card-block不能将卡的网格内容与卡的边缘完美对齐的原因.

所以,我不确定你想要实现什么,但还有其他两种方法可以使用卡内的网格.一种方法是使用.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

原文链接:https://www.f2er.com/css/214817.html

猜你在找的CSS相关文章