html - Bootstrap 响应式搜索引擎布局

Question

我正在尝试使用 bootstrap 在其上设置响应式输入和 Logo 。我尝试了我所知道的每一件事来做到这一点。列(网格系统)，调整大小等。无论我如何做。结果是 buggy 。即，当我缩小浏览器窗口时，它开始变得乱序。

调整结果窗口的大小以查看所有内容是如何被拉出比例的。 http://jsfiddle.net/Cbuyn/

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image">
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>

这是用 Bootstrap 3 完成的。我没有想法..

Answer 1

如果你想居中你的图像(假设你添加一个 id="main-img" 到图像):

#main-img {
    margin-left: auto;
    margin-right: auto;
}

jsFiddle Demo (image centered)

如果你想让图片全宽:

#main-img {
    width: 100%;
}

jsFiddle Demo (image full width) (根据评论更新)