Question

我正在尝试做一些非常简单的事情：在它旁边放一些文本和一组按钮（使用btn-group类）：

Make your choice : BUTTON

以下是我使用的代码：

<div>
    <p>Make your choice :</p>

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Button <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#" id="btn1">Select 1</a></li>
            <li><a href="#" id="btn2">Select 2</a></li>
            <li><a href="#" id="btn3">Select 3</a></li>
        </ul>
    </div>
</div>

此代码产生类似于：

的内容

Make your choice :
BUTTON

我正在寻找一个 Bootstrap 解决方案，让文本和按钮在同一行。我不想创建自己的样式，我想使用现有的Bootstrap类/组件实现这一点。

Answer 1

删除<p></p>：

<div>
Make your choice :

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" id="btn1">Select 1</a></li>
        <li><a href="#" id="btn2">Select 2</a></li>
        <li><a href="#" id="btn3">Select 3</a></li>
    </ul>
</div>

Answer 2

好吧，这是事后的事情（但可能对其他人有用），并没有真正使用“正确”的引导类，但我想要一些文本旁边的按钮，但也正确对齐它们：简单地制作文本内联不会导致它与按钮垂直对齐。事实证明你可以滥用btn类：

<div class="btn">
    Actions: 
</div>
<button class="btn btn-default" >Back To Client</button>

Answer 3

<p>元素默认为display:block，这就是为什么你会看到它下方的按钮。你可以使它内联（或内联块）。即 http://jsfiddle.net/2fTmb/

带Bootstrap的文本旁边的按钮

3 个答案: