不使用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> 

​

它看起来像这样：

​

​

所以red是“容器”，Flex item 3是带有flex-base: 100%的div元素，强制包装。它工作得很好，因为Flex项目2确实包装到了下一列。还请注意，我在元素上使用了order，不是让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

容器需要一个高度。So设置

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

解决了这个问题。引导程序容器显然没有高度。