web-dev-qa-db-ger.com

In Bootstrap 3: So ändern Sie den Abstand zwischen vertikalen Reihen?

Ich habe zwei Reihen a und b, ich denke, der Abstand zwischen den zwei Reihen in der Vertikale ist zu klein.

Ich möchte den Abstand vergrößern, ich weiß, ich kann den Abstand in horizontaler Richtung durch col-md-offset - * ändern. Aber wie kann ich den vertikalen Abstand ändern?

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

Jetzt ist meine Lösung ein Tag von h1 einfügen, ich denke, dass es nicht anmutig ist.

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

Hat es eine anmutigere Lösung?

htmlcsstwitter-bootstraptwitter-bootstrap-3
30
wcc526

Anstatt einen Tag hinzuzufügen, der niemals eine gute Lösung ist. Sie können die margin-Eigenschaft immer mit dem erforderlichen Element verwenden. 

Sie können den Rand der Zeilenklasse selbst hinzufügen. Das wird sich also global auswirken.

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

Update : Eine bessere Lösung wäre in allen Fällen, eine neue Klasse einzuführen und sie dann zusammen mit der Klasse .row zu verwenden.

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

Dann verwenden Sie es wo immer Sie möchten

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

benutzen:

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

Wenn ich es wäre, würde ich eine neue CSS-Klasse einführen und zusammen mit der unveränderten Bootstrap-Zeilenklasse verwenden.

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

Wenn Sie SASS verwenden, mache ich das normalerweise.

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

so können Sie später beispielsweise margin-top-xs verwenden

9
Orlando