显示twitter bootstrap btn-group与文本内联 [英] Display twitter bootstrap btn-group inline with text

问题描述

问题

我想要能够使用btn group进行twitter启动，并在一些文字的左侧显示按钮。

$ b

$ b

我目前有一个btn组用两个按钮定义。我然后有按钮一串文本。

 < p> 
< div class =btn-groupdata-toggle =buttons-checkbox> 
< div class =btn btn-small> BTN文字1< / div> 
< div class =btn btn-small> BTN文字2< / div> 
< / div> 
在同一行上的按钮之后显示的字符串
< / p> 
  

我尝试过的

我在这里试过几件事。我将< p> 标记修改为两个span的< div class =row> divs一个为按钮，一个为文本，但这没有工作。我还尝试了以下操作：

 < div& 
< div class =btn-group inlinedata-toggle =buttons-checkbox> 
< div class =btn btn-small> BTN文字1< / div> 
< div class =btn btn-small> BTN文字2< / div> 
< / div> 
< span class =inline>在同一行上的按钮后显示的字符串< / span> 
< / div> 
  

并在css .inline {display：inline-block; zoom：1; * display：inline;} 但是这也没有工作。这是我得到的。正如你可以看到，文本显示在按钮组下面。我想要按钮组右侧的文字。

问题

做得到按钮组显示在字符串的右边吗？有什么已经内置在twitter bootstrap为此，如果是什么？如果没有，我是否正确地创建了一个内联类，如果是这样，为什么它不工作？

更新

感谢RichardTowers对按钮组上的左右类的建议。然而，当添加更多的集合（需要）我得到以下：

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

解决方案

放置拉左按钮div上： http://jsfiddle.net/dbTqC/653/

我想这只是设置 float：left ，所以你需要清除下面的东西。有一个 clearfix 类。

这是值得看看一些CSS资源，以便您了解此处发生的情况。

Problem

I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.

What I Have

I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.

<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>

What I have tried

I have tried a few things here. I modified the <p> tag to be a <div class="row"> with two span divs one for the buttons and one for the text but this did not work. I also tried the following:

<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>

and defined in the css .inline {display:inline-block; zoom:1; *display: inline;} However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.

Question

What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?

Update

Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:

I assume that this is because of floating. Is this correct and how would I fix it?

解决方案

Put pull-left on the buttons div: http://jsfiddle.net/dbTqC/653/

I think this just sets float: left, so you'll need to clear things below it. There's a clearfix class for this.

It's worth having a look at some CSS resources so that you understand what's happening here.

这篇关于显示twitter bootstrap btn-group与文本内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！