Bootstrap: ajouter des écarts entre les divs

Si ma page utilise la classe de Bootstrap row, col-md-x pour organiser le contenu, ce qui serait la bonne façon de créer une distance entre chaque div contenant un ensemble d'élément sémantiquement parlant?

J'ajoute un div avec un rembourrage entre les divs pour simuler l'écart, est-ce une bonne tactique ou est-il une meilleure?

  • Ne vous voulez juste ajouter une marge à row? Comme .row { margin-bottom: 40px; }?
  • col-md-offset-N?
  • Peut-être, mais pas pour tous les .row div... je ne veux pas jouer avec les propriétés CSS de Bootstrap et de les modifier. @Jonathan Lonowski n'est pas que pour le positionnement horizontal?
  • puis ajouter votre propre classe pour les lignes que vous souhaitez modifier, comme .spaced-row et ajouter la marge pour que.
  • Vous n'avez pas vraiment préciser "à la verticale." Juste un "écart entre les divs" après mentionner à la fois en ligne et en colonne les divs, ce qui suggère que vous pourriez souhaiter un ou l'autre ou les deux espacement vertical et horizontal. Mais, oui, offset classes seulement avec l'horizontale.
InformationsquelleAutor dabadaba | 2014-01-02
  1. 43

    L'ajout d'un rembourrage entre les divs pour simuler une lacune pourrait être un hack, mais pourquoi ne pas utiliser quelque chose de Bootstrap offre. Il a appelé les décalages. Mais encore une fois, vous pouvez définir une classe dans votre personnalisé.css (vous ne devez pas modifier le noyau de la feuille de style de toute façon) de fichiers et d'ajouter quelque chose comme .gap. Cependant, .col-md-offset-* fait le travail la plupart du temps pour moi, me permettant de justement laisser un écart entre les divs.

    Que pour l'espacement vertical, malheureusement, il n'y a pas quelque chose ensemble intégré comme ça dans le Bootstrap 3, de sorte que vous aurez à inventer votre propre classe personnalisée pour le faire. Je serais normalement faire quelque chose comme .top-buffer { margin-top:20px; }. Cela fait l'affaire, et, évidemment, il n'a pas à être 20px, il peut être quelque chose que vous aimez.

    • C'est ce que je suis à la recherche d', quelque chose qui Bootstrap vous donne déjà de le faire. Mais autant que je sache, compensée seulement aide à positionner les divs horizontalement et non verticalement, et je veux créer l'écart entre les divs placé au-dessous de l'autre.
    • Je comprends. Vérifier mon montage.
    • Ok, merci pour votre réponse, c'est comment je vais le faire.
    • N'oubliez pas de +1 et de la marque que de résoudre, si vous avez trouvé utile 🙂
    • Je sais, ne vous inquiétez pas! Seulement il y a un timer pour cela, je vais voter en 3 minutes.
    • que faire si j'ai 4 divs avoir de la classe .col-md-4 dans une rangée et je veux ajouter un espace après les 3 premiers?

    InformationsquelleAutor Ali Gajani
  2. 28

    À partir de Bootstrap v4 vous pouvez simplement ajouter la ligne suivante à votre div attribut de classe: mt-2 (margin top 2)

    <div class="mt-2 col-md-12">
        This will have a two-point top margin!
</div>

    D'autres exemples sont donnés dans la documentation: Bootstrap v4 docs

    InformationsquelleAutor Tony Sepia
  3. 18

    - Je une seule instance de l'remplissage vertical, de sorte que j'ai inséré cette ligne à l'endroit approprié pour éviter l'ajout de plus à la css. <div style="margin-top:5px"></div>

    • Qui fonctionne. Mais la convention d'un bon développeur est de conserver les actifs séparément. Il est préférable de définir une classe ou d'une référence à votre div id dans un fichier css séparé. Croyez-moi quand je dis cela, dans le webdesign, les singletons sont rares !
    InformationsquelleAutor Kopernikus
  4. 1

    Une autre façon d'accomplir ce que vous demandez, sans avoir des problèmes sur la version mobile de votre site web, (Rappelez-vous que la marge attribut de frein de votre mise en page responsive sur la version mobile vous devez donc ajouter sur votre élément supplémentaire d'attribut comme @media (min-width:768px){ 'your-class'{margin:0}} pour remplacer la précédente marge)

    est de nest votre classe dans votre choix div puis ajouter sur votre classe
    la marge de l'option que vous voulez

    comme l'exemple suivant:
    HTML

    <div class="container">
  <div class="col-md-3 col-xs-12">
   <div class="events">
     <img src="..."  class="img-responsive" alt="...."/>
     <div class="figcaption">
       <h2>Event Title</h2>
       <p>Event Description.</p>
     </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
</div>

    Et sur votre CSS, il suffit d'ajouter l'option marge sur votre classe, qui dans cet exemple est "événements" comme:

    .events{
margin: 20px 10px;
}

    Par cette méthode, vous aurez toutes les voulais de l'espace entre votre divs de s'assurer que vous ne freinez pas n'importe quoi sur votre site web, mobile et tablette versions.

    InformationsquelleAutor Laurent Doda