显示与文本内联的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类.

值得查看一些CSS资源,以便了解这里发生的事情.

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

这有效：

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