水平对齐h3和h5

Question

我试图使用引导使我的h3标题与我的h5对齐，使它们彼此一致。

编辑我正在尝试使用已经可用的引导程序，除非绝对必要，否则不要更改。

这里有一个屏幕来演示我的意思。

​

例如，名字应与地址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

这不是标头的目的。(语义不正确，搜索引擎不会喜欢这个)

我建议为此使用一个表(它是表格数据)，并为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 2

最好不要弄乱h3/h5高度，而应使用多个rows。如果其中一个文本变得如此之长，以至于它被包装了，该怎么办？然后你就可以对你的布局说再见了。如果使用多个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。标题的目的是定义文本的逻辑单元之间的关系，因此<h5>是以<h3>标记为首的文本章节中文本子部分的标题。

Answer 3

在css样式中为h3和h5设置同一行、边距和填充。