html - Bootstrap 3 中的响应式 HR 对齐

Question

我希望 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;
  } 
}

这是想要的效果图片；

左对齐；

居中对齐

Answer 1

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