Html 按钮旁边的文本与引导

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

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>

---

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

元素默认设置为

显示：块

，这就是为什么您会看到它下面的按钮。可以将其设置为内联（或内联块）。即

移除

：

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

做出选择：
按钮

---

好的，这是事后诸葛亮的做法（但对其他人可能有用），并不是真的“正确”使用引导类，但我希望按钮旁边有一些文本，但也与按钮正确对齐：简单地将文本内联不会导致它与按钮垂直对齐。原来你可以滥用

btn

类：

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

行动：
返回客户

嗯，就是这么简单。。谢谢你的回答。这也解决了问题，但Céline的答案更简洁，因为我不需要添加额外的样式。我不认为移除不会让我失去任何东西。如果你认为有，请告诉我！将其包装在元素上（在您的情况下，p或span会更好，因为它是默认的内联显示），这样在您想要对其应用某种样式的情况下就不会有任何麻烦：）是的，我明白了。那我就“跨越”它吧！：）谢谢

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