Fügen Sie den Abstand zwischen vertikal gestapelten Säulen in der Bootstrap-4

Leider, es scheint nicht zu sein ein guter Weg, um zu verwalten vertikalen Abstand zwischen den Spalten, dass der übergang von einem horizontalen Stapel, um einen vertikalen Stapel an bestimmten Haltepunkten. Es scheint,Lösung, wenn eine form beteiligt ist, aber das ist nicht die situation hier. Ich habe habe versucht, diese Lösung, aber es funktioniert nicht, wenn es mehrere Spalten, wickeln Sie Sie in einer Reihe.

Zur Veranschaulichung mein Szenario hier ist die Struktur meiner HTML: 

<body>

  <div class="container">

    <div class="row">

      <div class="col-md-4">
        col 1
      </div>

      <div class="col-md-4">
        col 2
      </div>

      <div class="col-md-4">
        col 3
      </div>

      <div class="col-md-4">
        col 4
      </div>

      <div class="col-md-4">
        col 5
      </div>

      <div class="col-md-4">
        col 6
      </div>

    </div>

  </div>

</body>

https://jsfiddle.net/b74a3kbs/6/

Bei mittlerer Größe Gerät (md) und von oben, würde ich mag, dort zu sein, Abstand zwischen den beiden "Zeilen" von Spalten, aber keinen Abstand oberhalb der "ersten Reihe" mit 3 Spalten und keine unterhalb der "zweiten Reihe" der 3 Spalten. Wenn die Spalten-Stapel vertikal in die unter dem medium-Größe Gerät (md), möchte ich dort die Abstände zwischen den einzelnen Spalten, aber keines über das erste Kind und keiner unter dem letzten Kind.

Ideal, die die Lösung funktionieren würde, unabhängig davon, wie viele Spalten (z.B. 3, 5, 6, 12) enthalten sind, die innerhalb der Zeile.

ich glaube nicht, dass Sie das tun können. Sie sollten versuchen, die Aufteilung in 2 Zeilen und dann kannst du es getan
ok, dann möchte ich Sie ermutigen, schlagen vor, wie eine Lösung...sicherlich scheint wie eine

InformationsquelleAutor keruilin | 2017-04-04

  1. 25

    Verwenden Sie die neue Bootstrap-4 Abstand utilities. Zum Beispiel mb-3 fügt margin-bottom von 1rem.
    Keine extra CSS sind erforderlich.

    http://www.codeply.com/go/ECnbgvs9Ez

    <div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        col 1
      </div>
      <div class="col-md-4 mb-3">
        col 2
      </div>
      <div class="col-md-4 mb-3">
        col 3
      </div>
      <div class="col-md-4 mb-3">
        col 4
      </div>
      <div class="col-md-4 mb-3">
        col 5
      </div>
      <div class="col-md-4">
        col 6
      </div>
    </div>
</div>

    Den Abstand utils reagieren, so dass Sie anwenden können Ihnen für bestimmte Haltepunkte (ie; mb-0 mb-md-3)

    Wenn Sie möchten, eine CSS-Lösung, verwenden Sie die Lösung erklärt in der zugehörigen 3.x Frage (es ist
    nicht abhängig von der Verwendung eines Formulars): https://jsfiddle.net/zdLy6jb1/2/

    /* css only solution */
[class*="col-"]:not(:last-child){
  margin-bottom: 15px;
}

    Hinweis: die col-lg-4 ist Fremd in Ihrem markup, da col-lg-4 col-md-4,
    ist die gleiche wie col-md-4.

    InformationsquelleAutor Zim

  2. 0

    Hier, wie ich endete damit, diese Arbeit:

    .row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}

    InformationsquelleAutor keruilin

  3. 0

    Landete ich mit dieser Lösung:

    @include media-breakpoint-down(xs) {
  [class*="col-sm"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(sm) {
  [class*="col-md"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(md) {
  [class*="col-lg"]:not(:last-child){
    margin-bottom: 15px;
  }
}

    InformationsquelleAutor user1263663

Schreibe einen Kommentar