引导4对齐像表这样的等号列中的文本

Question

我有以下代码来列出链接列表：

<h3>Hours</h3>
<div class="hours-display pb-2">
  <div class="mb-0"><span class="mr-2"><strong>Mon</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300"></div>
  <div class="mb-0"><span class="mr-2"><strong>Tue</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300"></div>
  <div class="mb-0"><span class="mr-2"><strong>Wed</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300"></div>
</div>

你可以在图像中看到的结果

​

如何正确地对齐列？

Answer 1

我会重组并执行如下操作，其中有一个外部flex，它的子元素是flex列，因此信息将垂直弯曲，而不是默认的水平。

请注意，包含小时的第二个div需要将div包装在小时和伴随的跨度上，因为有多个子元素。在div中包装它们可以允许第二个d-flex div的直接子包正确地包装它们。

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Hours</h3>
<div class="d-flex hours-display pb-2">
  <div class="d-flex flex-column">
    <span class="mr-2"><strong>Mon</strong></span>
    <span class="mr-2"><strong>Tue</strong></span>
    <span class="mr-2"><strong>Wed</strong></span>
  </div>
  <div class="d-flex flex-column">
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
  </div>
  <div class="d-flex flex-column">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300">
  </div>
</div>

​