Question

我有以下代码，根据我发现的示例，它看起来好像应该在水平行中写出来，但它实际上被渲染成列？

<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>

Answer 1

＆＃34; Flexbox Row在列中显示为与行相关联？＆＃34;

因为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

Boostrap 4 Flexbox Row在列中显示为与行相关联？

1 个答案: