css - Bootstrap 4.0 - 使用 flex 列

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

您可以使用 d-flex 而不是 row 作为 row 可以wrap - 内容可以丢弃在边栏下方。

对于内容，如果你必须保留 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>