不使用 Bootstrap 4 flex 进行包装

Question

当我使用flex-base: 100% 时，我希望有两个包含多个块的列，这些块包含在第二列中。这是我想要的一个例子：

.container1 {
  height: 50vh;
  width: 50vw;
}

.item1 {
  height: 10%;
  width: 70%;
}

.item2 {
  height: 10%;
  width: 28%;
}

.item3 {
  width: 2%;
}

.break-column {
  flex-basis: 100%;
}

.item4 {
  height: 10%;
  width: 70%;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>



<div class="border border-danger d-flex flex-column flex-wrap container1 p-0 m-0" >

  <div class="item1 order-1 border border-primary rounded">
  Flex item 1
  </div>
  
  <div class="item2 order-4 border border-secondary rounded">
  Flex item 2
  </div>
 
  
  <div class="item3 order-3 border border-info
  rounded flex-grow-1 flex-shrink-1 pr-0 mr-0 break-column">
  Flex item 3
  </div>
  
    <div class="item4 order-2 border border-info
  rounded flex-shrink-1 pr-0 mr-0">
  Flex item 4
  </div>


</div> 

看起来像这样：

所以红色是“容器”，Flex item 3 是带有flex-base: 100% 的div 元素，它强制换行。它很好地工作，因为 Flex 项目 2 确实包装到下一列。另请注意，我在元素上使用了顺序，而不是 Flex item 4 包装，而是 Flex item 2。

但是在我的项目中，我使用了 Bootstrap 4，但不知何故它不起作用。根本没有包装。我认为这是因为在我的项目的根目录中使用了“容器”，这是一个具有自身特点的 Bootstrap 容器。当在小提琴中模拟它时，它确实不再起作用了：

.item1 {
  height: 10%;
  width: 70%;
}

.item2 {
  height: 10%;
  width: 28%;
}

.item3 {
  width: 2%;
}

.break-column {
  flex-basis: 100%;
}

.item4 {
  height: 10%;
  width: 70%;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">

<div class="border border-danger d-flex flex-column flex-wrap  p-0 m-0" >

  <div class="item1 order-1 border border-primary rounded">
  Flex item 1
  </div>
  
  <div class="item2 order-4 border border-secondary rounded">
  Flex item 2
  </div>
 
  
  <div class="item3 order-3 border border-info
  rounded flex-grow-1 flex-shrink-1 pr-0 mr-0 break-column">
  Flex item 3
  </div>
  
    <div class="item4 order-2 border border-info
  rounded flex-shrink-1 pr-0 mr-0">
  Flex item 4
  </div>


</div> 

</div>

看起来像这样：

你可以看到只有一列，所以没有换行。这是为什么？我该如何解决这个问题？

Answer 1

容器需要一个高度。所以设置

.container1 {
  height: 50vh;
  width: 50vw;
}

解决了。引导容器显然没有高度。