Question

我正在使用bootstrap 4.3旋转器，所有功能都运行良好，但我想在旋转器下放置其他文本。这是我的HTML

<div class="d-flex justify-content-center">
       <div class="row">
           <div class="spinner-border" role="status">
               <span class="sr-only">Loading...</span>
            </div>
         </div>
        <div class="row">
            <strong>Collecting data</strong>
        </div>
                            
    </div>

但是微调框上会附加“收集数据”文本，我该如何解决？

Answer 1

将这两个类添加到容器div中：

flex-column align-items-center

flex-column使flexbox垂直堆叠，align-items-center使这些项目在新轴上居中。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center">
   <div class="row">
       <div class="spinner-border" role="status">
           <span class="sr-only">Loading...</span>
       </div>
    </div>
    <div class="row">
      <strong>Collecting data</strong>
    </div>
</div>

Answer 2

问题是，当您将包装div类定义为display:flex时，它会将内部元素堆叠为列。

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="spinner-border" role="status">
         <span class="sr-only">Loading...</span>
    </div>
  </div>
  <div class="row justify-content-center">
    <strong>Collecting data</strong>
  </div>
</div>

container类将删除行的负边框，justify-content-center将使行内的内容居中

Demo Code Pen

将文字放在微调引导程序下

2 个答案: