Bootstrap 3 中的响应式 HR 对齐

Posted 2023-03-06

【中文标题】Bootstrap 3 中的响应式 HR 对齐

【英文标题】：Responsive HR alignment in Bootstrap 3

【发布时间】：2017-10-02 12:11:34

【问题描述】：

我希望 HR 标签与使用 Bootstrap 3 的文本具有相同的响应对齐方式，因此当文本居中时，它位于下方，也居中。当文本左对齐时，HR 位于下方，也是左对齐。

我认为这可以通过使用 text-xs-center 和 text-lg-left 将其包装在标签旁边的 div 中来实现，但这些类似乎只会影响文本。

有没有聪明的方法来实现这一点？

注意：我使用的是 HR 而不是边框​​底部，因为它有一个特定的长度 (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;
   

这里是想要的效果的图片；

左对齐；

居中对齐

【参考方案1】：

在h1 中使用border-bottom 怎么样

编辑

嗨，谢谢，但 hr 的特定宽度为 60 像素，这只是 强调整个事情。对不起，我应该说更多 很明显

使用伪元素::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>

【讨论】：

嗨，谢谢，但 hr 的特定宽度为 60 像素，这只是强调了整个事情。抱歉，我应该更清楚地说明这一点。

谢谢，但问题是关于下划线本身的定位。这仍然保持居中。我添加了一些屏幕截图以使其更清晰。

@paddyfields 查看更新的答案。无需媒体查询

【参考方案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:afterleft: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>

【讨论】：

是的，我的回答 ;)

@dippas 我也有同样的想法.. 但是你在我编辑的一分钟前发布了答案.. 你可以拿走所有的学分.. 没问题 :)

嗨，谢谢你们的回答，但我使用的是 HR，因为它的宽度固定为 60 像素。

@Paddyfields 所以你的宽度总是 60px？

HR，不是标题，它就在下面