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

前端之家收集整理的这篇文章主要介绍了css – 显示twitter bootstrap btn-group与文本内联前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题

我想要能够使用btn组进行twitter引导,并将按钮显示在某些文本的左侧。不知道这是否已经在twitter bootstrap中可用,或者我需要添加一些css。

我拥有的

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

<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>
    <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;缩放:1; * display:inline;}但是这也不行。这是我得到的您可以看到文本正在按钮组下方显示。我想要按钮组右侧的文本。

我可以如何使按钮组显示在字符串的右侧?有没有内置的twitter引导为此,如果是这样的话?如果没有,我是否建立一个内联课的正确轨道,如果是这样,为什么它不起作用?

更新

谢谢RichardTowers在按钮组左拉班的建议。然而,当添加更多的集合(这是必需的)我得到以下内容

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

解决方法

在左侧按钮div: http://jsfiddle.net/dbTqC/653/

我认为这只是设置float:左,所以你需要清除下面的东西。有一个clearfix类为此。

值得一看some CSS resources,让您了解这里发生了什么。

猜你在找的CSS相关文章