Bootstrap 4.0 - 使用弹性列

Question

您好，您能帮我在代码中设置列吗？我有这个代码：

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="flex-column h-100">side menu</div>
        <div class="???">
            <div>1 piece</div>
            <div>2 pieces piece</div>
            <div>1 piece</div>
        <div/>
    <div/>
<div/>

这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。列的比例为 1:2:1 可调。

Answer 1

row您可以将其用作罐头包装，而不是使用d-flex-row内容可以放在侧边栏下方。

对于内容，如果您必须保留 html 结构，则可以使用它：

<div class="d-flex w-100">
  <div class="col-3">1 piece</div>
  <div class="col-6">2 pieces piece</div>
  <div class="col-3">1 piece</div>
</div>

请参阅下面的演示 - 添加边框以进行说明：

<div class="d-flex w-100">
  <div class="col-3">1 piece</div>
  <div class="col-6">2 pieces piece</div>
  <div class="col-3">1 piece</div>
</div>

html,body {
  height: 100%;
}
div {
  border: 1px solid;
}