Bootstrap 4 Flexbox - 将多列与对齐项目中心对齐

Question

我有 3 列试图垂直居中于视口。列必须是全宽 - 没有内联。我希望它们像在代码层中一样垂直堆叠，只需使用“align-items-center”，因此所有三个都垂直于视口居中。

检查this。

<div class="container-fluid" style="border: 3px solid red;">
<div class="row min-vh-100" style="border: 4px solid blue;">
    <div class="col" style="border: 3px solid yellow;">
        <div class="flex-column align-items-center p-2" style="border: 4px solid orange;">Flex item 1</div>
        <div class="flex-column p-2" style="border: 4px solid orange;">Flex item 1</div>
        <div class="flex-column p-2" style="border: 4px solid orange;">Flex item 1</div>
    </div>
</div>

Answer 1

试试这个。您在内部项目上使用了 flex-column，但它必须在 flex 上，并且您在容器上缺少 d-flex 类。看看这个以获得更好的想法：https://getbootstrap.com/docs/4.4/utilities/flex/

<div class="container-fluid" style="border: 3px solid red;">
    <div class="row min-vh-100" style="border: 4px solid blue;">
        <div class="col d-flex flex-column justify-content-center" style="border: 3px solid yellow;">
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
        </div>
    </div>
</div>