Question

在响应时，在页面中心放置徽标和表单的最佳方法是什么？

目前，我有类似

的内容

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

但是，现在徽标不会像输入框一样调整大小。

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

Answer 2

一个流体容器可以解决这个问题，但是一个固定的容器应该能够保持它的中心位置，而不会占用所有屏幕跨度，这对于中等+分辨率来说很烦人。

此外，媒体查询应将.container保持在特定宽度内，以便响应。

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <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>

Bootstrap Center Form＆amp;响应式搜索引擎等徽标

2 个答案: