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>

我的萨斯;

.title-block {
  display: block;
  h1 {
    margin: 0px;
    font-size: 35px;
  }
  hr {
    width: 60px;
    border-top: 1px solid #1c1c1c;
  } 
}

以下是所需效果的图片;

左对齐;

CENTER对齐

Answer 1

在border-bottom

中使用h1怎么样？

修改

  

嗨，谢谢，但hr的特定宽度为60px，这只是   强调整个事情。对不起，我应该说更多   清楚地

使用伪元素::before或::after

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用 pseduo元素 css，您可以实现此目的。提供 h1 position:relative并使用:after添加一行width:60px并为其position:absolute设置其位置以获得所需的结果： ）

.title-block {
  display: block;
    text-align:left;
}
.title-block h1 {
  margin: 0px;
  font-size: 35px;
 position:relative;
  display: inline-block;

}
.title-block h1:after{
content:'';
width:60px; height:1px; background:red; position:absolute; bottom:-5px;
left:0px; right:auto; margin:0px auto;
}

@media(max-width:768px){
.title-block{ text-align:center}
.title-block h1:after{left:0px; right:0px;}
}

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