显示与文本内联的twitter bootstrap btn-group

Question

问题

我希望能够将btn组用于twitter bootstrap，并将按钮显示在某些文本的左侧。不确定这是否已在twitter bootstrap中提供，或者我是否需要添加一些css。

我有什么

我目前有一个用两个按钮定义的btn-group。然后，我在按钮后面有一串文字。

<p>
    <div class="btn-group" data-toggle="buttons-checkbox">
        <div class="btn btn-small">BTN Text 1</div>
        <div class="btn btn-small">BTN Text 2</div>
    </div>
   String to display after buttons on same line
</p>

我尝试了什么

我在这里试了几件事。我将<p>标记修改为<div class="row">，其中两个跨度div用于按钮，一个用于文本，但这不起作用。我也尝试了以下内容：

<div>
    <div class="btn-group inline" data-toggle="buttons-checkbox">
        <div class="btn btn-small">BTN Text 1</div>
        <div class="btn btn-small">BTN Text 2</div>
    </div>
   <span class="inline">String to display after buttons on same line</span>
</div>

并在css .inline {display:inline-block; zoom:1; *display: inline;}中定义但是这也不起作用。这就是我得到的。如您所见，文本显示在按钮组下方。我希望文本位于按钮组的右侧。

问题

如何让按钮组显示在字符串的右侧？有什么内容已经内置到twitter引导程序中，如果是这样的话？如果没有，我是否在创建内联类的正确轨道上，如果是这样的话，为什么它不起作用？

更新

感谢RichardTowers关于按钮组上左拉类的建议。但是当添加更多集合（需要）时，我得到以下内容：

我认为这是因为浮动。这是正确的，我该如何解决？

Answer 1

将pull-left放在按钮div：http://jsfiddle.net/dbTqC/653/

上

我认为这只会设置float: left，因此您需要清除它下面的内容。这有一个clearfix类。

值得一看some CSS resources，以便了解这里发生的事情。

Answer 2

<p class="btn-toolbar">
  <span class="btn-group">
    <a href="#" class="btn">Button 1</a>
  </span>
  <span class="btn-group">
    <a class="btn" href="#">Button 2</a>
    <a class="btn" href="#">Button 3</a>
  </span>
  <span class="btn-group">Text here.</span>
</p>

Answer 3

我按照this SO answer中的建议做了，所以基本上我开始使用.navbar .brand样式并稍微调整一下。
如果有兴趣，这是我改变的风格：

/* See .navbar .brand style in bootstrap.css for a reference */ 
.btn-toolbar .title {
  display: block;
  float: left;
  margin-top: -4px; /* Recover part of margin set in child Header nodes */
  margin-left: 10px;
  font-size: 20px;
  font-weight: 200;
  color: #777777;
  text-shadow: 0 1px 0 #ffffff;
}

HTML用法：

<div class="btn-toolbar">
    <div class="btn-group pull-left">
        <a class="btn" href="#/search">Search...</a>
    </div>
    <div class="title">
        <h4>View offers</h4>
    </div>
    <div class="btn-group pull-right">
        <a class="btn" href="#/batchDelete">Delete ...</a>
        <a class="btn" href="#/new">New</a>
    </div>
</div>

和最终结果：

Answer 4

这有效：

<p>Hello <span class="btn-group">...</span></p>