网格行为 Bootstrap 4 与 Bootstrap 3

Question

我注意到 v3 和 v4 之间发生了一些我不知道的小变化。

基本上我试图建立这个问题的答案：Twitter Bootstrap 3 rowspan and reorder 但在 Bootstrap4.

显而易见的解决方案是使用 "float-sm-right" class，而不是自定义的 "b-col"。但这不起作用，相反，红色列总是被推到蓝色列的末尾。

<div class="col-sm-5 float-sm-right">

http://jsfiddle.net/jr70k9L6/

那么有什么方法可以在 Bootsrap4 中构建它，同时仍然获得比 sm 更小尺寸的 A-B-C 订单？

对我来说似乎微不足道，但我就是无法理解这个……

Answer 1

答案很简单：Flex 不会浮动。 Bootsrap4 class="row" 是 display: flex; 所以 float-sm-right 不会工作。

如果您去掉 class="row" 并将所有 div 浮动在该网格中，则在 v4 中是可能的：

<div class="">
    <div class="col-sm-7 float-left" style=" background: green; height: 300px;">
        <p>A</p>
    </div>
    <div class="col-sm-5 float-left float-sm-right" style="background: blue; height: 600px;">
        <p>B</p>
    </div>
    <div class="col-sm-7 float-left" style="background: red; height: 300px;">
        <p>C</p>
    </div>

</div>

http://jsfiddle.net/j0scL2r9/

网格行为 Bootstrap 4 与 Bootstrap 3

Grid behavior Bootstrap4 vs Bootstrap3

twitter-bootstrap-3

bootstrap-4

flexbox

css-float

grid-layout