html - 如何使用 Bootstrap 将内联元素排成一行？

Question

我正在使用 Bootstrap 3 设计我的网站，我想在一个 div 中水平放置一个文本输入和 3 个按钮。这是我的标记:

<div style="width: 400px">
  <input class="form-control" type="text">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
</div>

但是文本输入跨越了整个 div 的宽度并且按钮被推到了它下面。

我已经尝试将文本输入的显示模式设置为 inline 和 inline-block 但它没有改变任何东西。

Answer 1

试试这个 DEMO

<div class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    <a class="btn btn-default" href="#">Button 1</a>
    <a class="btn btn-default" href="#">Button 2</a>
    <a class="btn btn-default" href="#">Button 3</a>
</div>