web-dev-qa-db-fra.com

(bootstrap) Garder un peu d'espace vertical entre les éléments lorsqu'ils se terminent

À l’aide de Bootstrap, lorsque je mets un groupe d’éléments (par exemple, des boutons) dans une rangée et que nous réduisons la fenêtre, les éléments s’enroulent. 

Cependant, s'il existe un espace horizontal entre les éléments lorsque la fenêtre est suffisamment large pour tout contenir les uns à côté des autres, verticalement, tout se coince, avec zéro pixel d'espace vide entre eux.

Exemple en direct (rétrécit ou élargit la fenêtre de sortie pour voir l'effet)

Exemple de capture d'écran:
1. Assez large, remarquez un espace entre les boutons
2. Enroulant autour de vous, ne remarquez pas d'espace entre les boutons empilés les uns sur les autres

Je suppose que je pourrais jouer avec certains CSS personnalisés, en ajoutant des marges verticales ou autres, mais pour que les éléments soient aussi compatibles et standards que possible, je me demande s’il existe un moyen plus efficace ou plus naturel de résoudre ce problème dans une présentation Bootstrap?

htmlcsstwitter-bootstrapbuttonwhitespace
16
RocketNuts

Ce qui se passe ici, c'est que les boutons sont affichés sous forme de bloc en ligne et que, par défaut, ces éléments ne comportent aucun espace ni marge. Vous pouvez utiliser la méthode ci-dessous pour éviter cela. 

Ce que j'ai fait est ajouté une classe à l'élément parent des boutons et hériter du style de la classe "btn". 

html

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 button-wrapper'>
            <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
            <button class='btn btn-info'>consectetur adipiscing elit</button>
            <button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

css

.button-wrapper .btn {
    margin-bottom:5px;
}

Démo

22
Shanaka

Avec Bootstrap, j'aime toujours faire des classes pour ajouter des marges supérieure et inférieure comme ceci:

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

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

Il est facile à retenir et constitue une solution rapide à ce problème. Ajoutez simplement à votre fichier main.css.

12
Millsionaire

Essayez comme ceci: Demo

CSS:

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }
8
G.L.P

Demo Utilisez css-bottom de la marge pour Button.

    .btn{margin-bottom:10px;}

Vous pouvez écrire ce css avec le nouveau nom de la classe parente, afin d’éviter que css n’affecte les autres pages.

3
Ezhil - UI Developer

Vérifiez le exemple ci-dessous:

Code:

.btn {
    margin: 10px auto;
}
<div class='container'>
	<div class='row'>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-info">consectetur adipiscing elit</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
        </div>        
        
	</div>
</div>

Exemple

3
biplob

J'utilise cette méthode: ajoutez une div avec un espace vertical:

<div class="vspace1em"></div>

css:

    div.vspace1em {
        clear: both;
        height: 1em;
    }
1
Roland