html - 如何使用 Bootstrap 创建响应式输入和按钮

Question

我正在尝试像该图像一样创建响应式输入和按钮:

这是一个类似的问题，但没有回应: google search bar twitter-bootstrap

如何让它响应？

我正在使用最新的 Bootstrap 版本。

Answer 1

结合将控件放置在两 行上，以便它们在彼此下方折叠，以及 Bootstrap 的 text-center helper class使它们居中(您也可以在这里使用 offset)

最后，Bootstrap 的输入标签在默认情况下会拉伸(stretch)到其封装列的全宽，因此添加了一个自定义类以将“搜索输入”限制为用户设置的宽度。

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>

结果

演示 fiddle :http://jsfiddle.net/A9C6U/