html - 将 Bootstrap 输入元素移到页面下方

Question

我正在尝试将类“顶部”(我的搜索栏/按钮)移动到页面的一半位置，但使用底部或其他任何东西都没有运气。目前它只是停留在顶部。我还想扩大搜索框，但不确定如何做。

<div class="row top">

    <div class="col-md-2">
    </div>

    <div class="col-md-8">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Type a hero">
          <span class="input-group-btn">
            <button class="btn btn-primary">
              <span class="glyphicon glyphicon-search">
              </span> Search
            </button>
          </span>
      </div>
    </div>

    <div class="col-md-2">
    </div>

</div>

此外，我确信有更好的方法可以让我的搜索框居中，而不是在两侧添加列来安抚网格系统，但我不知道，有什么提示吗？

这是它目前的样子:

Answer 1

尝试将您自己的类添加到 div

CSS

.top-buffer { margin-top: 30px;}

HTML

<div class="row top top-buffer">

    <div class="col-md-8 col-md-offset-2">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Type a hero">
          <span class="input-group-btn">
            <button class="btn btn-primary">
              <span class="glyphicon glyphicon-search">
              </span> Search
            </button>
          </span>
      </div>
    </div>

</div>