web-dev-qa-db-fra.com

Bootstrap 4 alpha 6 - comportement de la carte à l'intérieur de la ligne

J'utilise bootstrap 4 alpha 6 et j'ai remarqué un comportement étrange lors de l'utilisation d'une grille à l'intérieur du corps d'une carte sans bloc de carte.

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

Je ne veux pas utiliser de rembourrage pour le corps de ma carte

Le bloc de construction d'une carte est le bloc .card. Utilisez-le chaque fois que vous avez besoin d'une section rembourrée dans une carte.

mais ma grille sort du corps de la carte.
Est-ce un comportement souhaité ou un bug à corriger?

Je vous remercie

JSFiddle (ouvrir la vue complète)

cssbootstrap-4twitter-bootstrap-4
13
Paolo Rossi

C'est le comportement souhaité du système de grille. Le .row a une marge négative pour contrebalancer le remplissage des colonnes de la grille, de sorte que les colonnes les plus à gauche et à droite soient correctement alignées avec le bord de la fenêtre d'affichage (ou le bord du .row)). De plus, pendant que la marge négative est là, le contenu de chaque colonne de la grille est toujours dans la carte en raison du remplissage de chaque colonne.

Normalement, le .row est placé à l'intérieur d'un .container ou .container-fluid qui a un rembourrage de 15 pixels pour contrebalancer la marge négative. .card-block a un rembourrage, mais ce n'est pas 15px, c'est pourquoi le .card-block n'aligne pas parfaitement le contenu de la grille de la carte sur le bord de votre card.

Donc, je ne suis pas sûr de ce que vous essayez de réaliser, mais il existe 2 autres façons d'utiliser la grille à l'intérieur du card. Une façon consiste à utiliser un .container-fluid pour que les colonnes de la grille extérieure s'alignent parfaitement avec le bord de la carte ...

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

Une autre consiste à utiliser une ligne sans gouttière (.no-gutters). Cela supprimerait la marge négative de la ligne et le remplissage de toutes les colonnes. Le contenu de chaque colonne prend alors toute la largeur de la colonne.

<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