css - Bootstrap 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 div，其子项是 flex-column，因此信息将垂直 flex 而不是默认水平。

请注意，包含小时数的第二个 div 需要将 div 包裹在小时数和伴随的跨度周围，因为有不止 1 个子元素。将它们包装在 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>