Question

我使用display: flex;以确保在使用class="col-md-6"时我的单元格具有相同的高度。然而，当观看不同屏幕尺寸的内容时，这导致我的细胞不会改变。那么我应该如何编写flex以保持高度并尊重bootstrap的列属性？

Here is the fiddle

Answer 1

最好放弃预制课程并做自己的课程。 flex属性允许您选择宽度，并根据容器中的空间大小为其提供缩小或增长的选项。这样，如果删除了一列，其他列将增长/缩小以填充其余空间。

当Flexbox变得对浏览器友好时，我放弃了引导程序，我没有回头。它为我节省了大量的时间和代码。这篇文章旨在了解有关魔法弹性的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请注意，在屏幕大于500px之前，媒体查询不会让flex进入。这就是我的移动方式，因为它只是按照自然的方式堆叠div。您可以执行多个媒体查询来控制各种屏幕尺寸的.col宽度，以便您可以定制不同设备的外观。

请注意：stackoverflow上的代码编辑器需要进行扩展，以便在调整浏览器大小时启动媒体查询。

@media(min-width:500px){
  .flex{ display:flex; }
  .col{ flex: 1 1 16.6666667%; }
}

<div class="flex">

  <div class="col">
    <p>Column 1</p>
  </div><!-- col -->
  
    <div class="col">
      <p>Column 2</p>
    </div><!-- col -->
  
    <div class="col">
     <p>Column 3</p>
   </div><!-- col -->
  
    <div class="col">
     <p>Column 4</p>
    </div><!-- col -->
  
    <div class="col">
      <p>Column 1</p>
    </div><!-- col -->
  
    <div class="col">
      <p>Column 5</p>
    </div><!-- col -->
    
    <div class="col">
      <p>Column 6</p>
    </div><!-- col -->
    
</div><!-- flex -->

使flex尊重bootstrap列属性

1 个答案: