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

罐 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 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-*

类和 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 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 类决定，具体取决于可用/需要的空间量。

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