twitter-bootstrap 将引导输入元素进一步向下移动到页面

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31574775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:58:55  来源:igfitidea点击:

Move a bootstrap input element further down the page

htmlcsstwitter-bootstrap

提问by Luke Casey

I'm trying to move the class "top" (my search bar/button) half way down the page but am having no luck using bottom or anything else. Currently it's just stuck at the top. I would also like to make the search box bigger but am not sure how to.

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

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

Also I'm sure there's a better way to center my search box instead of adding columns either side to appease the grid system but I have no idea, any tips?

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

Here's what it currently looks like:

这是它目前的样子:

Here's what it currently looks like

这是它目前的样子

回答by Cohan

Try adding your own class to the div

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

CSS

CSS

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

HTML

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>