Comment définir l'espacement des lignes dans bootstrap

Par exemple, le code HTML suivant basé sur la mise en page du framework Bootstrap doit ajouter un espacement (remplissage ou marge) entre chaque ligne. Quelles méthodes peuvent être obtenues ?

<div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Option 1

Ajouter une nouvelle classe de style et définir la marge -top style, tel que :

.top-buffer { margin-top:20px; }

Ensuite, ajoutez la classe de style sur l'élément div où se trouve la ligne, telle que :

<div class="row top-buffer"> ...</div>

Option 2

Définissez quelques classes générales de style de marge supérieure, telles que :

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

Ensuite, ajoutez une classe de style CSS appropriée sur l'élément div où se trouve la ligne, telle que :

<div class="row top7"></div>

Option 3

Dans Bootstrap 4, vous pouvez utiliser la classe de style d'espacement intégrée (voir ici pour plus de détails), telle que :

<div class="row mt-3"></div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!