在Chrome中我有2×2 table
-
在这两个row
小号具有col-md-6
和col-md-6
但是在Firefox中,我有4x1 table
,所有col-md-6
块都显示在一行中。
可以在Firefox中获得2x2表格吗?
我正在使用以下代码段:
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>
您需要添加flex-wrap:wrap
,.row-flex,.row-flex > 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句