在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中添加垂直堆栈列之间的间距

回答

相关问题