那些是 HTML:
<div class="btn-toolbar text-center" role="toolbar">
<a href="#" class="btn btn-success">Link 1</a>
<a href="#" class="btn btn-success">Link 11</a>
<a href="#" class="btn btn-success">Link 111</a>
<a href="#" class="btn btn-success">Link 1111</a>
<a href="#" class="btn btn-success">Link 11111</a>
<a href="#" class="btn btn-success">Link 111111</a>
<a href="#" class="btn btn-success">Link 11111</a>
<a href="#" class="btn btn-success">Link 1111</a>
<a href="#" class="btn btn-success">Link 111</a>
<a href="#" class="btn btn-success">Link 111</a>
<a href="#" class="btn btn-success">Link 11</a>
<a href="#" class="btn btn-success">Link 111</a>
<a href="#" class="btn btn-success">Link 1111111</a>
<a href="#" class="btn btn-success">Link 111111111</a>
<a href="#" class="btn btn-success">Link 111</a>
<a href="#" class="btn btn-success">Link 11111</a>
<a href="#" class="btn btn-success">Link 11</a>
<a href="#" class="btn btn-success">Link 11111111111</a>
<a href="#" class="btn btn-success">Link 11111</a>
<a href="#" class="btn btn-success">Link 1</a>
</div>
那些是 CSS:
.btn-toolbar{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.btn-toolbar .btn{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
flex Css 不支持 Safari、iPhone 5、IOS 6 和移动浏览器 Webviews。我使用浏览器支持,但它仍然无法正常工作。请提供任何解决方案。我不想使用任何固定宽度。
Best Answer-推荐答案 strong>
.btn-toolbar{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.btn-toolbar .btn{
-webkit-box-flex-grow: 1;
-moz-box-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
关于ios - Safari、iPhone 5 和移动浏览器 Webviews 不支持 flex Css,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/35529878/
|