Текст не отображается в гибкой строке
У моего внешнего div есть d-flex flex-row, а у меня всего три под-блока. Два из них - btn-group, а другой - текстовый блок. У меня все это есть в другом div, у меня есть класс center-block. Чтобы показать эти подэлементы, я сделал их z-index: 1. Отображаются кнопки, но не текст.
<div class = "center-block">
<div class = "d-flex flex-row">
<div class = "btn-group" role = "group" aria-label = "..." style = "z-index: 1;">
<!-- Two buttons here -->
<div class = "btn-group" role = "group" aria-label = "..." style = "z-index: 1;">
<!-- One button here -->
<div aria-label = "..." style= "z-index:1">Hello</div>
</div>
Ответы 1
Начиная с Bootstrap 4 beta3, .center-block был удален в пользу .mx-auto: https://getbootstrap.com/docs/4.1/migration/#utilities. Но поскольку вы не упомянули, чего вы ожидаете от установки .center-block на все, я не включил это в свою скрипку.
Текст отображается без помощи z-index.
Рабочий пример:http://jsfiddle.net/aq9Laaew/104420/
Спасибо, что собрали это вместе. Однако это не совсем то, что я ищу. Я изучу mx-auto, который я еще не исследовал.
Затем расскажите нам, что вы ищете и чего ожидаете, с помощью '.center-block'.
Я не могу добавить сюда свой код, потому что мне это не разрешено. Если бы вы могли привести мне простой пример, все было бы хорошо. Думаю, мне здесь просто не хватает логики. Мне просто нужны три вещи на гибком ряду. Три кнопки в левой части строки и текст, расположенный по центру в этой строке.