html - 水平对齐 h3 和 h5

Question

我正在尝试使用 bootstrap 将我的 h3 标题与我的 h5 对齐，以便它们彼此对齐。

编辑我正在尝试使用已经可用的 Bootstrap 并避免更改 css，除非绝对必要。

这是一个演示我的意思的屏幕。

例如名字应与地址 1 对齐，姓氏应与地址 2 对齐，依此类推。

这是我的代码。

<div class="row ">
  <div class="col-md-4 ">
      <h3>First Name</h3>
      <h3>Last Name</h3>
      <h3>Week.</h3>
      <h3>Code.</h3>
  </div>
  <div class="col-md-4 ">
      <h5>Address 1</h5>
      <h5>Address 2</h5>
      <h5>Address 3</h5>
      <h5>Country</h5>
  </div>
</div>

Answer 1

这不是 header 的用途。 (语义不正确，搜索引擎不会喜欢这样)

我建议为此简单地使用一个表格(它是表格数据)并对 td:first-child 使用不同的 CSS 规则和 td:nth-child(2)以获得不同的字体大小。

.x {
  width: 100%;
}
.x td {
  padding: 10px;
  font-family: sans-serif;
  font-weight: light;
}
.x td:first-child {
  font-size: 24px;
  width: 60%;
}
.x td:nth-child(2) {
  font-size: 16px;
  width: 40%;
}

<table class="x">
  <tr>
    <td>First Name</td>
    <td>Address 1</td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td>Address 2</td>
  </tr>
  <tr>
    <td>Week.</td>
    <td>Address 3</td>
  </tr>
  <tr>
    <td>Code.</td>
    <td>Country</td>
  </tr>
</table>