带Bootstrap的文本旁边的按钮

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>