Question

我尝试使用引导程序在其上面设置响应式输入和徽标。我在我的知识范围内尝试了所有这些事情。列（网格系统），调整大小等。无论我怎么做。事实证明是错误的。即当我缩小浏览器窗口大小时，它开始出现故障。

调整结果窗口大小以查看所有内容是如何从porportion中拉出来的。 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)（根据评论更新）

Answer 2

我从评论中看到你有一个解决方案。也就是说，以下工作正常，无需添加其他类。在xs和sm尺寸下它将是100％，然后从md尺寸开始，它将是容器的50％。请记住，响应不是关于人们调整浏览器大小，而是关于不同的设备大小。大多数人（除了构建响应式网站并试图测试它们的开发人员之外）在查看页面时不会调整浏览器的大小。此外，如果您使用的是移动设备，则大多数情况下无法调整浏览器的大小。因此，如果您希望992px（md）和向上视口仅在容器的50％处看到输入/图像，那么您的代码就完全可以了。

DEMO

<强> HTML：

<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 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>

正如@dan所述，如果您希望图像的宽度与您可以添加的输入相同：

img {
  width: 100%;
}

或使其居中并使其保持不大于最大尺寸：

img {
  display: block;
  margin: auto:
}

Bootstrap响应式搜索引擎布局

2 个答案:

DEMO