Поведение сетки Bootstrap4 против Bootstrap3 - PullRequest
Новая
       48

Поведение сетки Bootstrap4 против Bootstrap3

0 голосов
/ 04 апреля 2020

Я заметил, что что-то небольшое изменилось между v3 и v4, о которых я не знал.

По сути, я попытался построить ответ на этот вопрос: Twitter Bootstrap 3 rowspan и переупорядочить но в Bootstrap4.

Очевидным решением будет использование класса "float-sm-right" вместо пользовательского класса "b-col". Но это не работает, вместо этого красный цвет всегда выдвигается до конца синего. 

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

http://jsfiddle.net/jr70k9L6/

Так есть ли способ чтобы построить это в Bootsrap4, при этом получая заказ AB- C для меньших размеров, чем sm?

Мне это кажется тривиальным, но я просто не могу обернуть голову вокруг этого ...

1 Ответ

0 голосов
/ 05 апреля 2020

Ответ был прост: 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/

...