(bootstrap) en Gardant un peu de l'espace vertical entre les éléments quand ils wrap?

En utilisant Bootstrap, quand je vais mettre un tas d'éléments (boutons, par exemple) dans une rangée et réduire la taille de la fenêtre, les éléments autour.

Mais il y a une espace horizontal entre les éléments lorsque la fenêtre est assez large pour contenir tout ce qui est à côté de l'autre, à la verticale tout est collé, avec zéro pixels d'espace vide entre les deux.

Live exemple (réduire ou agrandir la fenêtre de sortie pour voir l'effet)

Capture d'écran exemple:
1. Assez large, de l'avis de l'espace entre les boutons
2. S'enroulant autour d', avis PAS d'espace entre les boutons empilés sur le dessus de l'autre

Je suppose que je pourrais perdre avec certains CSS personnalisé, l'ajout de parois verticales ou autres joyeusetés, mais afin de garder les choses comme compatible et standard que possible, je me demande si il est mieux ou plus natif façon de résoudre ce problème dans un Bootstrap de mise en page?

dupliquer : stackoverflow.com/questions/17809671/... stackoverflow.com/questions/21981117/... stackoverflow.com/questions/18918921/...

OriginalL'auteur RocketNuts | 2015-04-29

  1. 22

    Ce qui se passe ici est que les boutons sont affichés en ligne bloc et par défaut, ces éléments n'ont pas d'espace ou de la marge pour commencer. Vous pouvez utiliser la méthode ci-dessous pour éviter cela.

    Ce que j'ai fait est ajouté une classe à l'élément parent de l'boutons et hériter de style de 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

    Cela a de la marge, même sur les écrans qui sont assez large pour afficher les boutons sur une seule ligne. Cette réponse est de savoir comment vous évitez - stackoverflow.com/questions/30887071/...

    OriginalL'auteur Shanaka

  2. 12

    Avec Bootstrap, j'ai toujours envie de faire des classes pour l'ajout de marges supérieure et inférieure de la sorte:

    .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; }

    C'est facile à retenir et est un moyen rapide de résoudre ce problème. Il suffit d'ajouter à votre main.fichier css.

    Ne fonctionne pas pour moi. Peut-être que ces classes ne fonctionnent pas en combinaison avec certaines classes de bootstrap en raison de flotter ou de paramètres d'affichage. Mais j'ai trouvé une alternative similaire, voir ma solution

    OriginalL'auteur Millsionaire

  3. 8

    Essayer comme ceci: Démo

    CSS:

     @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }
    Fonctionne pour moi et pas de personnalisation de html.
    Oui, ce qui semble sorte de gênant pour moi, mais je pense que c'est la meilleure solution que j'ai vu jusqu'à présent. Aurait du sens si bootstrap aurait certaines classes qui s'activer seulement basé sur des tailles différentes pour les marges et les choses (comme mt-sm-10, mb-md-20, etc). Je me demande si ce sont vaut la peine d'ajouter?

    OriginalL'auteur G.L.P

  4. 3

    Démo
    Utiliser Margin-bottom css pour le Bouton.

        .btn{margin-bottom:10px;}

    U peut écrire ce css avec le nouveau parent nom de la classe ,afin d'éviter au-dessus de css affecter dans d'autres pages.

    OriginalL'auteur Ezhil - UI Developer

  5. 1

    Je suis en utilisant cette méthode: ajouter un div avec quelques verticale de l'espace:

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

    css:

        div.vspace1em {
        clear: both;
        height: 1em;
    }
    Cette solution est beaucoup plus propre que l'ajout de marges de bootstrap éléments.

    OriginalL'auteur Roland