html - 文本未显示在 flex 行中

Question

我的外部 div 有 d-flex flex-row 并且我总共有三个子 div。其中两个是 btn-group，另一个是带有文本的 div。我将所有这些都放在另一个 div 中，我有 center-block 类。为了显示这些子 div，我将它们设置为 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>

Answer 1

自 Bootstrap 4 beta3 以来，.center-block 已被删除，取而代之的是 .mx-auto:https://getbootstrap.com/docs/4.1/migration/#utilities .但是由于您没有提到将 .center-block 放在所有内容上的期望，所以我没有将其包含在我的 fiddle 中。

文本在没有 z-index 帮助的情况下显示。

fiddle : http://jsfiddle.net/aq9Laaew/104420/