我希望 HR 标签与使用 Bootstrap 3 的文本具有相同的响应对齐方式,因此当文本居中时,它位于下方,也居中。当文本左对齐时,HR 位于下方,并且也是左对齐的。
我认为这可以通过使用 text-xs-center 和 text-lg-left 将其包装在标签旁边的 div 中来实现,但这些类似乎只影响文本。
有没有聪明的方法来实现这一点?
注意:我使用的是 HR 而不是 border-bottom,因为它有一个特定的长度 (60px),无论 H1 标题的长度如何,它都保持不变。
<div class="title-block text-xs-center text-lg-left">
<h1>My Title</h1>
<hr>
</div>
还有我的 Sass;
.title-block {
display: block;
h1 {
margin: 0px;
font-size: 35px;
}
hr {
width: 60px;
border-top: 1px solid #1c1c1c;
}
}
这是想要的效果图片;
左对齐;
居中对齐
最佳答案
在 h1
中使用 border-bottom
怎么样
编辑
Hi, thanks but the hr has a specific width of 60px, this just underlines the whole thing. Sorry I should have stated that more clearly
使用伪元素 ::before
或 ::after
.title-block h1 {
margin: 0;
font-size: 35px;
padding-bottom: 5px;
position: relative;
}
.title-block h1::before {
content: "";
height: 1px;
width: 60px;
position: absolute;
bottom: 0;
border-bottom: 1px solid #1c1c1c;
}
.title-block.text-xs-center h1::before {
left: 0;
right: 0;
margin: auto;
}
.title-block.text-lg-left h1::before {
left: 0;
right: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="title-block text-xs-center text-lg-left">
<h1>My Title</h1>
</div>
关于html - Bootstrap 3 中的响应式 HR 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43780762/