如何使用引导程序创建响应式输入和按钮

Question

我正在尝试在该图像上创建响应式输入和按钮：

以下是类似的问题，但没有回复： google search bar twitter-bootstrap

如何使其响应？

我使用的是最新的bootstraper版本。

Answer 1

结合将控件放在两个行上，以便它们相互折叠，以及Bootstrap的text-center helper class以使它们居中（您也可以在这里使用offset ）

最后，Bootstrap的输入标签默认伸展到它的封闭列的全宽，因此添加了一个自定义类来将“搜索输入”限制为用户设置的宽度。

HTML

<style type="text/css">
    .smaller-input {
        width: 80%;
        margin: 0px auto 15px auto;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <div class="input-group smaller-input">
                  <input type="text" class="form-control" />
                  <span class="input-group-addon">
                      <span class="glyphicon glyphicon-earphone"></span>
                  </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <div class="btn btn-default">Google Search</div>
                <div class="btn btn-default">I'm Feeling Lucky</div>
            </div>
        </div>
    </div>
</div>

结果

演示小提琴：http://jsfiddle.net/A9C6U/

Answer 2

将它们放在网格标签中会自动响应。

<div class="row">
        <div class="col-md-6 col-md-offset-3 text-center">
        your html (button/input) here
     </div>
</div>

注意：不为您的输入分配修正大小。例如宽度：300像素

http://getbootstrap.com/examples/grid/