Question

我注意到在我不知道的v3和v4之间有一些小变化。

基本上，我试图建立以下问题的答案：Twitter Bootstrap 3 rowspan and reorder 但在Bootstrap4中。

显而易见的解决方案是使用“ float-sm-right”类，而不是自定义的“ 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/

网格行为Bootstrap4与Bootstrap3

1 个答案: