web-dev-qa-db-ja.com

ブートストラップ4アルファ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>

カードの本文にパディングを使用したくない

カードの構成要素は.card-blockです。カード内のパッド付きセクションが必要な場合はいつでも使用してください。

しかし、私のグリッドはカードの本体から出てきます。
望ましい動作ですか、それとも修正すべきバグですか？

ありがとうございました

JSFiddle （フルビューを開く）

cssbootstrap-4twitter-bootstrap-4
13
Paolo Rossi

これは、グリッドシステムの望ましい動作です。 .rowには負のマージンがあり、グリッド列のパディングを打ち消すため、左端と右端の列はビューポートのエッジ（または.rowのコンテナーのエッジ）と適切に位置合わせされます。また、負のマージンがあっても、各グリッド列のパディングのため、各グリッド列のcontentはカード内にあります。

通常、.rowは.containerまたは.container-fluidの内側に配置され、負のマージンを相殺するために15pxのパディングがあります。 .card-blockにはパディングがありますが、15pxではないため、.card-blockはカードのグリッドコンテンツをcardのエッジに完全に揃えません。

したがって、何を達成しようとしているのかはわかりませんが、card内のグリッドを使用する方法が他に2つあります。 1つの方法は、.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>

もう1つは、余計な行（.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

26
Zim