css - Bootstrap - 对齐列文本元素

Question

我正在努力对齐右侧 Bootstrap 列中的右侧 2 个“h”元素(即 h1 和 h3)。

<div class="col-xs-6">photo</div>
<div class="col-xs-6 text-right">
<h1>Header</h1>
<h3 style="width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</h3>
</div>

问题是固定宽度的 h3 没有右对齐，而 h1 片段是。参见 screen

这里是 fiddle

调试后我发现问题是由于 h1 宽度属性引起的。但我需要它来保持文本折叠。可以通过手动设置左边距来解决，但我相信有更优雅的解决方案。

为什么 width 属性会阻止文本对齐，解决方案是什么？

Answer 1

尝试使用以下 block 。

CSS:

h1, h3{
    display: inline-block;
    padding-right: 20px;
}