web-dev-qa-db-ja.com

Bootstrap 4の垂直に積み上げられた列の間にスペースを追加する

残念ながら、特定のブレークポイントで水平スタックから垂直スタックに移行する列間の垂直間隔を管理する良い方法はないようです。 フォームが関係する場合の解決策 があるようですが、ここではそうではありません。 この解決策を試してみました ですが、行で折り返す複数の列がある場合は機能しません。

私のシナリオを説明するために、ここに私の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/

ミディアムデバイスサイズ（md）以上では、列の2つの「行」の間にスペースが必要ですが、3列の「最初の行」の上にはスペースがなく、 3列。列が中程度のデバイスサイズ（md）未満で垂直にスタックする場合、各列の間にスペースが必要ですが、最初の子の上と最後の子の下には何もありません。

理想的には、ソリューションは、行に含まれる列の数（3、5、6、12など）に関係なく機能します。

html5css3bootstrap-4twitter-bootstrap-4spacing
9
keruilin

私がこの作品を作った方法は次のとおりです。

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

新しいBootstrap 4 spacing utility を使用します。たとえば、mb-3は1remのマージン下部を追加します。
追加のCSSは必要ありません。

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>

間隔ユーティリティは応答性があるため、特定のブレークポイントに適用できます（つまり、mb-0 mb-md-3）

CSSソリューションが必要な場合は、関連する3.xの質問で ソリューションの説明 を使用してください（それはnotフォームの使用に依存）： https://jsfiddle.net/zdLy6jb1/2/

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

注：col-lg-4はcol-lg-4 col-md-4であるため、マークアップでは無関係です。
はcol-md-4と同じです。

31
Zim

以下のスニペットを参照するか、jsfiddle

あなたが持っている列の数や行に関係なく動作します

最初（大画面で）すべての行にmargin-bottom中画面の最後の行を除き、行には余白がなく、列はlast col from last rowを除いてすべてmargin-bottomになります。

.row {
        margin-bottom:30px;
}
.row:last-child{
        margin-bottom:0;
}
.row [class*="col-"] { 
   border:1px solid red;
}

@media only screen and (max-width: 768px) {
        .row { 
        margin:0
        }
        .row [class*="col-"]  {
                margin-bottom:30px;
        }
        .row:last-child [class*="col-"]:last-child{
                margin-bottom:0;
        }
}
<body>

<h1 class="display-3">
hey
</h1>

  <div class="container">

    <div class="row">

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

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

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

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

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

    </div>

  </div>

</body>
1
Mihai T

私はこの解決策になりました：

@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;
  }
}
0
user1263663