水平对齐 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

在 css 样式中为 h3 和 h5 设置相同的 line-heigt、边距和填充

Answer 2

这不是 headers 的目的。（语义不正确，搜索引擎不会喜欢这个）

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

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

Answer 3

最好不要弄乱 h3/h5 高度，而是使用多个 row。例如。如果其中一个文本变得太长以至于它换行了怎么办？然后你可以对对齐的布局说 bye-bye 。如果您使用多个 rows:

，那将永远不会发生

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

除此之外：我同意其他人的评论，即您首先不应使用 h3/h5。 Headers 旨在定义文本逻辑单元之间的关系，因此 <h5> 是 sub-sub 文本部分的 header =14=]标签。

水平对齐 h3 和 h5

Horizontally aligning a h3 and h5

html

css

twitter-bootstrap

twitter-bootstrap-4