Question

那些是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和移动浏览器Webview。我使用浏览器支持，但它仍然无法正常工作。请问任何一种解决方案。我不想使用任何固定的宽度。

Answer 1

.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;
}

flex Css不支持Safari，iPhone 5和移动浏览器Webview

1 个答案: