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 的列可以调整。

原文由 Denis Stephanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

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

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid h-100">
  <div class="d-flex h-100">
    <div class="flex-column h-100">side menu</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>
  </div>
</div>

原文由 kukkuz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 col 类使用以下解决方案：

 body {
  height:100vh;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="flex-column h-100">side</div>
    <div class="col">1 piece</div>
    <div class="col-6">2 pieces piece</div>
    <div class="col">1 piece</div>
  </div>
</div>

另一个使用 w-* 类和 引导 flexbox 的解决方案：

 body {
  height:100vh;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
  <div class="row h-100 d-flex flex-nowrap align-items-stretch">
    <div class="flex-column h-100">side</div>
    <div class="w-25">1 piece</div>
    <div class="w-50">2 pieces piece</div>
    <div class="w-25">1 piece</div>
  </div>
</div>

原文由 Sebastian Brosch 发布，翻译遵循 CC BY-SA 3.0 许可协议