對齊按鈕和手機屏幕大小的輸入形式 - 引導

我有一個文本輸入和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

對齊按鈕和手機屏幕大小的輸入形式 - 引導

回答

相關問題