Кнопка переполнения текста в кнопке IE11, должна увеличивать ширину кнопки и переходить на новую строку, если она слишком большая - PullRequest
Новая
       1

Кнопка переполнения текста в кнопке IE11, должна увеличивать ширину кнопки и переходить на новую строку, если она слишком большая

0 голосов
/ 01 декабря 2018

Название в значительной степени объясняет проблему.В любом другом браузере, кроме IE11, кнопки соответствуют ширине внутреннего текста.Затем она перемещает кнопку в новую строку, если она слишком велика, чтобы поместиться в текущую строку, и автоматически расширяет другие кнопки, чтобы заполнить всю строку.

enter image description here

Я пробовал несколько вещей с различными flex свойствами, но не могу решить проблему.Другие браузеры в основном работают с Bootstrap 4 из коробки.

1 Ответ

0 голосов
/ 03 декабря 2018

Я пытался воспроизвести вашу проблему, но на моей стороне в IE кнопка автоматически переместится в новую строку, когда текст кнопки слишком большой в IE11.

Или вы могли бы {display: flex; flex-direction: row;}, чтобы заставить кнопку отображать строку за строкой.

Вот мой тестовый код и вывод: 

<style type="text/css">
    .BtnSize {
        display: flex;
        flex-direction: row;
    }
</style>
<body>
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
  <input type="button" value="Test1Test1Test1,Test2Test2Test2" class="BtnSize" />
</body>

the result without setting flexthe result with setting flex

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...