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

【问题标题】：Aligning buttons and input form in mobile screen size - Bootstrap在移动屏幕大小中对齐按钮和输入表单 - Bootstrap
【发布时间】：2017-12-31 22:42:17
【问题描述】：

我有一个文本输入和 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，但这不适用于较小的屏幕尺寸。对于手机屏幕尺寸，如何对齐按钮和输入表单，使其在一条线上？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

将所有三个buttons 和input 放在div 中，类为row，然后为每个元素赋予其自己的div，类为col-xs-3。这会将它们排列在一条线上，并为每个元素分配可用宽度的 1/4。

【讨论】：

【解决方案2】：

不使用bootstrap，但是可以添加

display: flex

到容器 div。

https://jsfiddle.net/cb95vs5p/

【讨论】：

完美运行。 display:flex 到底是做什么的？
@ecain 基本上它是一种灵活的（响应式）布局模式。除此之外，它还可以做很多事情。如果您有兴趣here 是一个概述。