Boostrap 4 Flexbox Row отображается в столбцах по сравнению со строками? - PullRequest
Новая
       9

Boostrap 4 Flexbox Row отображается в столбцах по сравнению со строками?

0 голосов
/ 28 мая 2018

У меня есть следующий код, и на основании примеров, которые я обнаружил, выглядит так, как будто это должно выписывать их в горизонтальных строках, но на самом деле оно отображается в столбцах?

<div class="d-flex">
    <div class="flex-row">
        <div class="p-2">January</div>
        <div class="p-2">February</div>
        <div class="p-2">March</div>
        <div class="p-2">April</div>
    </div>
    <div class="flex-row">
        <div class="p-2">May</div>
        <div class="p-2">June</div>
        <div class="p-2">July</div>
        <div class="p-2">August</div>
    </div>
    <div class="flex-row">
        <div class="p-2">September</div>
        <div class="p-2">October</div>
        <div class="p-2">November</div>
        <div class="p-2">December</div>
    </div>
</div>

enter image description here

1 Ответ

0 голосов
/ 28 мая 2018

"Строка Flexbox отображается в столбцах, а не в строках?"

Поскольку flex-row не равно display:flex.flex-row должен быть в том же элементе, что и d-flex: 

<div>
    <div class="d-flex flex-row">
            <div class="p-2">January</div>
            <div class="p-2">February</div>
            <div class="p-2">March</div>
            <div class="p-2">April</div>
    </div>
    <div class="d-flex flex-row">
            <div class="p-2">May</div>
            <div class="p-2">June</div>
            <div class="p-2">July</div>
            <div class="p-2">August</div>
    </div>
    <div class="d-flex flex-row">
            <div class="p-2">September</div>
            <div class="p-2">October</div>
            <div class="p-2">November</div>
            <div class="p-2">December</div>
    </div>
</div>

https://www.codeply.com/go/HnEbrelWCC

...