web-dev-qa-db-fra.com

Dans Bootstrap 3, comment changer la distance entre les lignes en vertical?

J'ai deux rangées a et b, je pense que la distance entre les deux rangées verticalement est trop petite.

Je veux rendre la distance plus grande, je sais que je peux changer la distance en horizontal avec col-md-offset - *. Mais comment changer la distance verticale?

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <div class="row" id="b">
      <button>..</button>
    <div>

Maintenant ma solution est d'insérer une balise de h1, je pense que ce n'est pas gracieux.

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <h1></h1>
    <div class="row" id="b">
      <button>..</button>
    <div>

At-il une solution plus gracieuse?

htmlcsstwitter-bootstraptwitter-bootstrap-3
30
wcc526

Au lieu d’ajouter un tag qui n’est jamais une bonne solution. Vous pouvez toujours utiliser la propriété margin avec l'élément requis. 

Vous pouvez ajouter la marge sur la classe de ligne elle-même. Cela affectera donc globalement.

.row{
  margin-top: 30px;
  margin-bottom: 30px
}

Mise à jour : Une meilleure solution dans tous les cas serait d’introduire une nouvelle classe puis de l’utiliser avec la classe .row.

.row-m-t{
  margin-top : 20px
}

Alors utilisez-le où vous voulez

<div class="row row-m-t"></div>
26
Sachin

utilisation:

<div class="row form-group"></div>
21
Ahmad Behjati

Si c'était moi, j'introduirais une nouvelle classe CSS et l'utiliserais avec une classe d'amorce non modifiée.

HTML

<div class="row extra-bottom-padding" id="a">
   <img>...</img>
<div>
<div class="row" id="b">
   <button>..</button>
<div>

CSS

.row.extra-bottom-padding{
   margin-bottom: 20px;
}
14
Dasun

Si vous utilisez SASS, c'est ce que je fais normalement.

$margins: (xs: 0.5rem, sm: 1rem, md: 1.5rem, lg: 2rem, xl: 2.5rem);

@each $name, $value in $margins {
  .margin-top-#{$name} {
    margin-top: $value;
  }

  .margin-bottom-#{$name} {
    margin-bottom: $value;
  }
}

afin que vous puissiez utiliser plus tard margin-top-xs par exemple

9
Orlando