对齐按钮和手机屏幕大小的输入形式 - 引导

我有一个文本输入和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但是，这并不为更小的屏幕尺寸工作。使用移动屏幕尺寸时，如何对齐按钮和输入表单以使其位于一条线上？

来源

2017-07-25 ecain

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

display: flex

到div容器。

https://jsfiddle.net/cb95vs5p/

来源

2017-07-25 20:31:38

完美地工作。 “display：flex”究竟做了什么？ – ecain

@ecain基本上它是一个整体布局模式，使其变得灵活（敏感）。除此之外，它可以做很多事情。如果你有兴趣[这里]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）是一个概述。 –

将三种button S和与类的row一个div的input，然后给每个元素自身的div与班上col-xs-3。这将安排他们在一条线上，并分配每个元素1/4的可用宽度。

来源

2017-07-25 20:31:07 Kai

对齐按钮和手机屏幕大小的输入形式 - 引导

回答

相关问题