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

这是我的实际结果，我在其中绘制了我需要如何拆分 space 的其余部分。带有菜单的蓝色列应该有固定的，实际上是做什么的。列的比例 1:2:1 可以调整。

Answer 1

您可以使用以下解决方案使用 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-* classes and bootstrap 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>

Answer 2

您可以使用 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>

Answer 3

使用 Bootstrap v4 Flexbox：

<div class="d-flex flex-row h-100">
    <div class="d-flex justify-content-start">side menu</div>
    <div class="d-flex flex-row w-100">
        <div class="w-25">1 piece</div>
        <div class="w-50">2 pieces piece</div>
        <div class="w-25">1 piece</div>
    </div>
</div>

Answer 4

看来不用flex-column也能实现。

列比例由 flex-grow-1 class 根据 space available/needed 的数量决定。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div style="height: 175px;">

  <div class="d-flex flex-grow-1 border border-primary m-1 h-100">

    <div class="d-flex flex-grow-1 border border-secondary m-1">

      <div class="border border-success m-1">
        <!-- seems to work even without flex-column :D -->
        <div class="border border-warning m-1">1 piece</div>
        <div class="border border-info m-1">1 piece</div>
        <div class="border border-dark m-1">1 piece</div>
      
      </div>
      <!-- with flex-wrap they will go under eachother if there is not enough space -->
      <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1">
      
        <div class="flex-grow-1 border border-warning m-1">1 piece</div>
        <div class="flex-grow-1 border border-info m-1">2 pieces piece</div>
        <div class="flex-grow-1 border border-dark m-1">1 piece</div>
        
      <div/>

    <div/>

  <div/>

<div>

Bootstrap 4.0 - 使用弹性列

Bootstrap 4.0 - Use flex columns

css

twitter-bootstrap

flexbox

bootstrap-4

twitter-bootstrap-4