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
Move a bootstrap input element further down the page
提问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:
这是它目前的样子:
回答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>


