在移动屏幕大小中对齐按钮和输入表单 - Bootstrap

Question

我有一个文本输入和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>

我知道通常我可以使用form-inline，但这对于较小的屏幕尺寸不起作用。使用移动屏幕尺寸时，如何对齐按钮和输入表单以使其位于一行？

Answer 1

它不使用bootstrap，但你可以添加

display: flex

到容器div。

https://jsfiddle.net/cb95vs5p/

Answer 2

将所有三个button和input放在div的{​​{1}}类中，然后为每个元素添加自己的row div的等级。 这将把它们排列在一条线上并为每个元素分配1/4的可用宽度。