web-dev-qa-db-fra.com

Ajout de marges gauche et droite aux éléments de la ligne bootstrap

Je ne comprends pas trop pourquoi bootstrap n'appliquera pas les marges gauche et droite aux colonnes. Tout ce que je veux, c'est une simple ligne avec 3 colonnes qui ont entre 20pix de marge horizontale. Si vous essayez de faire cela, bootstrap attache simplement l’un des divs à la ligne suivante.

html

<div class="container">

  <div class="row">

    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 1</p></div>

  </div>

</div>

css

.col-md-4 {
  background-color: tomato;
  margin: 20px 5px;
}
htmlcsstwitter-bootstrap
10
Eli Tamosauskas

Les marges gauche et droite des colonnes détruiraient le comportement de la grille de Bootstrap. Ne modifiez pas les cours de Bootstrap. Ajoutez votre propres classes à la place. 

Dans votre exemple, insérez un <div> supplémentaire dans la colonne. Et donnez-lui une marge. 

HTML

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
    </div>
</div>

CSS

.spacer {
    background-color: tomato;
    margin: 20px 5px;
}

Démo

3
Sun

pour un peu plus d'espacement, vous pourriez faire: 

<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>

2
Dominofoe

Essayez ceci à la place:

.col-md-4 {
  background-color: tomato;
  margin: 20px 5px !important;
}
0
Kehlan Krumme

Bootstrap en insère un dans la nouvelle ligne car sa disposition en colonnes est de 12 colonnes maximum.

Lorsque vous avez 3 divs * (largeur de 4 colonnes + marge à droite), vous dépassez les 12 colonnes fournies. 

Vous pouvez régler votre division un peu plus mince, c’est-à-dire 3 colonnes d’amorçage moyennes, comme ceci:

 <div class="col-md-3 custom-box"><p>Box 1</p></div>
 <div class="col-md-3 custom-box"><p>Box 1</p></div>
 <div class="col-md-3 custom-box"><p>Box 1</p></div>

et appliquez votre règle css comme ceci:

.custom-box{
    margin-right: 20px 5px!important;
    background-color: tomato;
}

voici un VIOLON

0
Kristijan Iliev