Основано на моем previous question here. Я пытаюсь использовать функцию CSS Flex, чтобы оправдать кнопки панели инструментов нескольких строк, чтобы заполнить всю ширину строк, она работает в большинстве браузеров, кроме android WebView и iOS UIWevView, где я использую те, что находятся в моем мобильном приложении.Поддержка CSS Flex для Android WebView и iOS UIWebView
Вот код, который я использую.
<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: flex;
flex-wrap: wrap;
}
.btn-toolbar .btn{
flex: 1;
}
Так есть ли Fix для этого на Android и IOS Web Views.
Посмотрите на [caniuse] (http://caniuse.com/#feat=flexbox), чтобы увидеть поддержку браузера для модели flexbox. Если браузеры не поддерживают его, вы можете прибегнуть к полифонию, например [** Flexie **] (https://github.com/doctyper/flexie) – Aziz