2016-02-21 4 views
2

Основано на моем 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.

enter image description here

+0

Посмотрите на [caniuse] (http://caniuse.com/#feat=flexbox), чтобы увидеть поддержку браузера для модели flexbox. Если браузеры не поддерживают его, вы можете прибегнуть к полифонию, например [** Flexie **] (https://github.com/doctyper/flexie) – Aziz

ответ

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; 
} 
Смежные вопросы