Bootstrap行 - 右对齐

Question

我有一个标题 <h1>，它在一个 <div> 行中。我想要完全扩展 <h1> 的样式，但是将一个按钮放置在行的右侧。

我无法弄清楚如何正确设置 <span> 的值，以使按钮保持在右侧，但也扩展整个行的长度。

我唯一的想法是将 <h1> 放在一个 div .span6 中，然后将按钮放在另一个 div span 中的右侧，但这会在 <h1> 标题样式和按钮之间留下一个丑陋的空白。

此外，如果右侧有2个按钮，它需要是流体的。 这只是我试图做的示例。

- Matthew Friedman

Answer 1

您的原始问题有点不清楚，所以我猜测您是想了解类似这样的内容。

<div class="container">
  <div class="row">
    <a href="#" class="btn pull-right">Button 2</a>
    <a href="#" class="btn pull-right">Button 1</a>
    <h1>My fancy title</h1>
  </div>
</div>

在您编辑了jsfiddle示例之后，我认为如果您正在使用bootstrap，我的解决方案应该有效。由于您的css中有 .pull-right{float:none;} ，导致pull-right无法工作。

以下是一个简单的演示代码，只更改了按钮在h1之前，并在css结尾处添加了.pull-right{float:right;} http://jsfiddle.net/Arkkimaagi/KFsM6/1/

- Mikko Tapionlinna