我正在尝试使用引导程序将h3
标题与我的h5
对齐,以便它们彼此一致。
修改 我试图使用已经可用的引导程序,并且除非绝对必要,否则不要更改css。
E.g。名字应与地址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>
答案 0 :(得分:3)
这不是标题的用途。 (语义错误,搜索引擎不喜欢这个)
我建议只使用一个表(它是表格数据),并为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>
答案 1 :(得分:1)
最好不要混淆h3 / h5高度,而是使用多个row
代替。例如。如果其中一个文本变得太长以至于它包装了怎么办?然后你可以跟你对齐的布局说再见。如果您使用多个row
s:
<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>
标记开头的文本的子子部分的标题。
答案 2 :(得分:0)
在css样式中为h3&amp; h5设置相同的行高,边距和填充