在Bootstrap 4中添加垂直堆棧列之間的間距

不幸的是，似乎沒有一種好方法來管理在某些斷點處從水平堆棧轉換到垂直堆棧的列之間的垂直間距。似乎有一個solution when a form is involved，但這不是這裏的情況。我有tried this solution，但是當有多個包裝成行的列時，它不起作用。在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）及以上的，想我有那裏的之間進行間隔兩列「行」，但在三列的「第一行」之上沒有間距，而在三列的「第二行」之下沒有間距。當列垂直堆疊在中等設備大小（md）以下時，我希望在每列之間有間距，但是不要超過第一個孩子，也不要超過最後一個孩子。

理想情況下，無論該行中包含多少列（例如3，5，6，12），該解決方案都可以工作。

來源

2017-04-04 keruilin

我不認爲你可以做到這一點。你應該嘗試分2行，然後你可以完成 –

好吧，那麼我鼓勵你建議作爲解決方案......當然看起來像一個 – 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; 
    } 
}

來源

2017-04-06 01:11:21 keruilin

使用新的Bootstrap 4 spacing utilities。例如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>

的間距utils的響應，所以你可以應用它們的具體斷點（即; mb-0 mb-md-3）

如果你想要一個CSS的解決方案，使用solution explained在相關3.x問題（它是不是依賴於使用表單）：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。

來源

2017-04-04 13:37:47 ZimSystem

看到片斷低於或jsfiddle

它會不管你有多少的cols具有或工作排

第一（大屏幕）的所有行具有margin-bottom除了最後一個再用中小屏幕上，行將不會有任何餘量，並且cols將全部具有margin-bottom，除了last col from last row

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

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

<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>

來源

2017-04-04 13:37:55

在Bootstrap 4中添加垂直堆棧列之間的間距

回答

相關問題