Bootstrap flex 列在 Firefox 中无法正常工作

Posted

技术标签:

【中文标题】Bootstrap flex 列在 Firefox 中无法正常工作【英文标题】:Bootstrap flex columns not working correctly in Firefox 【发布时间】:2016-10-30 02:27:34 【问题描述】:

在 Chrome 中我有 2x2 table -

rows 中都有col-md-6col-md-6

但在 Firefox 中,我有 4x1 table,所有 col-md-6 块显示在一行中。

是否可以在 Firefox 中获取 2x2 表格?

我正在使用这个 sn-p:

html,
body 
  height: 100%;

.row-flex,
.row-flex > div[class*='col-'] 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 1 1 auto;

.row-flex-wrap 
  -webkit-flex-flow: row wrap;
  align-content: flex-start;
  flex: 0;

.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] 
  margin: -.2px;
  /* hack adjust for wrapping */

.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div 
  width: 100%;

.flex-col 
  display: flex;
  display: -webkit-flex;
  flex: 1 100%;
  flex-flow: column nowrap;

.flex-grow 
  display: flex;
  -webkit-flex: 2;
  flex: 2;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h3>.row-flex (make columns equal heights in each row)</h3>
</div>
<div class="container">
  <div class="row row-flex row-flex-wrap">
    <div class="col-md-6">
      <div class="panel panel-default flex-col">
        <div class="panel-heading">Title flex-col</div>
        <div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit.
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Duis pharetra varius quam sit amet vulputate.
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
      </div>
    </div>

  </div>
  <!--/row-->
</div>
<!--/container-->
<hr>

Bootply

【问题讨论】:

【参考方案1】:

您需要将flex-wrap:wrap 添加到.row-flex,.row-flex &gt; div[class*='col-'],这样col-md-6 将在没有空间时换行

我删除/调整了您的 flex 属性:

html,
body 
  height: 100%;

.row-flex,
.row-flex > div[class*='col-'] 
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;

.row-flex > div[class*='col-'] div 
  width: 100%;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>.row-flex (make columns equal heights in each row)</h3>
</div>
<div class="container">
  <div class="row row-flex">
    <div class="col-md-6">
      <div class="panel panel-default flex-col">
        <div class="panel-heading">Title flex-col</div>
        <div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit.
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Duis pharetra varius quam sit amet vulputate.
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
      </div>
    </div>

  </div>
  <!--/row-->
</div>
<!--/container-->
<hr>

【讨论】:

以上是关于Bootstrap flex 列在 Firefox 中无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

为啥我在 Bootstrap 4 中的 cols flex-grow 没有对齐?

Bootstrap 表的 IE11 Flex 问题

Flex 3列之间有空格[重复]

Bootstrap 4 列大小在 Google Chrome 中不起作用

bootstrap-flex、bootstrap-grid 和 bootstrap-reboot 的区别

为啥 Chrome 和 Firefox 显示不同的 flex 布局结果?