Html 移动屏幕尺寸中的对齐按钮和输入表单-引导

我有一个文本输入和3个按钮：

<div class = "container"
    <input type="text" class = "form-control" placeholder="Input here">
    <button type="button"  class="btn btn-default">Button 1</button>
    <button type="button"  class="btn btn-default">Button 2</button>
    <button type="button"  class="btn btn-default">Button 3</button>
</div>

我知道通常我可以使用表单内联，但这不适用于较小的屏幕尺寸。对于移动屏幕大小，如何对齐按钮和输入表单，使其位于同一行？

将所有三个按钮和输入放在一个div中，并使用row类，然后为每个元素指定自己的div和col-xs-3类。

---

这会将它们排列成一行，并将每个元素分配为可用宽度的1/4。

它不使用引导，但您可以添加

display: flex

到容器分区

---

工作完美。display:flex到底做什么？@ecain基本上是一种完整的布局模式，具有灵活的响应能力。除此之外，它还可以做很多事情。如果你感兴趣的话，这是一个概述。