html - Bootstrap Center 表单和 Logo ，如响应式搜索引擎

Question

在页面中央放置 Logo 和表单同时保持响应的最佳方式是什么？

目前，我有类似的东西

<div class="container">
<img src="logo.jpg" class="logo img-responsive center-block">

<form role="form">
  <div class="form-group center-block">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <span class="input-group-btn">
        <button class="btn btn-default btn-sm" type="submit">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </span>
    </div>
  </div>
</form>
</div>

然后我在CSS中稍微编辑了一下；

.form-group { margin-top: 15px; width: 50% }
.logo { width: 300px; }

但是，现在 Logo 不会像输入框那样调整大小。

Answer 1

现在您需要更改需要 xs sm md 和 lg 的每个媒体的 col 大小，但这将实现您正在寻找的技巧。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
            <form role="form">
                <div class="form-group center-block">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
 <button class="btn btn-default btn-sm" type="submit">
          <span class="glyphicon glyphicon-search"></span>

                        </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

我假设您需要一个流体容器，偏移量 col 将需要，为了进一步阅读检查 this

Demo