Bootstrap - 对齐列文本元素

Question

我努力与正确的2＆＃39; h＆＃39;右侧Bootstrap列中的元素（即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属性引起的。但我需要它来保持文本折叠。它可以通过手动设置左边距来解决，但我确信有一个更优雅的解决方案。

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

Answer 1

尝试使用以下块。

<强> CSS：

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