时间戳

首页 > 解决方案 > Bootstrap 4将文本左对齐，如表格

css - Bootstrap 4将文本左对齐，如表格

问题描述

我有以下代码用于制作链接列表：

<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>

您可以在图像中看到结果 在此处输入图像描述

如何正确垂直对齐列？

标签： cssbootstrap-4

解决方案

我会重组并做类似下面的事情，其中​​有一个外部 flex div，它的子元素是 flex-column，因此信息将垂直弯曲而不是默认水平弯曲。

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

<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>

推荐阅读