Html 引导响应式搜索引擎布局

我正试图有一个响应输入和一个标志上的它使用引导。我尽我所能去做这件事。列（gridsystem）、调整大小等，无论我如何操作。结果是马车。i、 e当我缩小浏览器窗口的尺寸时，它开始出现问题

调整结果窗口的大小，以查看如何将所有内容从部分中拉出。

---

这是通过引导3完成的。我没有主意了。

如果您想将图像居中（假设您在图像中添加了

id=“main img”

）：

如果要使图像全宽：

#main-img {
    width: 100%;
}

---

（根据评论更新）

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

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>

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

img {
  display: block;
  margin: auto:
}

---

童车是什么意思？你想让图像保持居中吗？或者图像总是全宽的，就像输入一样-如果img和输入框开始时相等，你调整窗口大小（向左调整），一切都开始变得疯狂。每件事都是多余的。这可能与您的列的引导col-x-x类有关。尝试添加这些“col-xs-12 col-sm-12 col-md-12 col-lg-12”而不是“col-md-6 col-md-offset-3”。使用Dan的示例并结合我给您提供的col-x-x类，这将解决您的问题，这很有趣，是的。非常感谢。我不知道应该编辑什么…只是将

col-md-6 col-md-offset-3

更改为

col-xs-12

？（顺便说一句，您不需要包括所有额外的

col-xx-12

，如果它们都是12，它们都将继承

col-xs-12

）这个答案是正确的。如果希望图像与该列的宽度一致，请将图像设置为100%。

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

img {
  width: 100%;
}

img {
  display: block;
  margin: auto:
}