twitter-bootstrap Twitter Bootstrap 3.0 - 居中搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18389845/
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
Twitter Bootstrap 3.0 - centered search box
提问by redo1134
I'm working in Bootstrap 3.0 trying to make a Google-style search box that has a "Search Help" link after the Submit button.
我正在使用 Bootstrap 3.0 尝试制作一个 Google 风格的搜索框，在提交按钮后有一个“搜索帮助”链接。
My problem: when I go responsive I lose my offset margins and the button wraps to the next line.
我的问题：当我做出响应时，我失去了偏移边距，并且按钮会换行到下一行。
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
<a href="#">Search Help</a>
</form>
</div>
</div>
C.f.: http://jsfiddle.net/redo1134/su3eq/2/
参考：http: //jsfiddle.net/redo1134/su3eq/2/
Everything's fine at >991px. But at 991 and below I lose the offset.
>991px 一切正常。但是在 991 及以下我失去了抵消。
This is certainly related to the #media (min-width: 992px)media query in bootstrap.css, but I don't know how to keep the offset.
这个肯定和#media (min-width: 992px)bootstrap.css中的媒体查询有关，但是不知道怎么保持偏移量。
And to make matters worse: when the viewport is <768px the button and the link wrap to the next line.
更糟糕的是：当视口 <768px 时，按钮和链接会换行到下一行。
Again, I'm drawn to bootstrap.css and the min-width: 768pxmedia query, but I don't know how to keep the input, button, and text all together.
同样，我被 bootstrap.css 和min-width: 768px媒体查询所吸引，但我不知道如何将输入、按钮和文本放在一起。
Thanks!
谢谢！
回答by Bass Jobsen
<div class="row search">
<div class="col-sm-8 col-sm-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
<a href="#">Search Help</a>
</div>
</form>
</div>
</div>
回答by Christina
DEMO:http://jsbin.com/IKaKosoX/1/
演示：http: //jsbin.com/IKaKosoX/1/
EDIT: http://jsbin.com/IKaKosoX/1/edit?html,css,output
编辑：http: //jsbin.com/IKaKosoX/1/edit?html,css,output
Remove the row col wrapping the form-inline and replace with this html:
删除包装表单内联的行 col 并替换为此 html：
<!-- Global Search -->
<form class="form-inline global-search" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>
</button> <a href="#">Search Help</a>
</form>
Remove previous custom css regarding the form and replace with:
删除以前关于表单的自定义 css 并替换为：
/* center search */
.global-search {
text-align:center;
padding:10px;
}
.global-search * {
display:inline-block;
margin-bottom:0;
}
.global-search .form-control {
width:120px;
}
.global-search a {
display:block;
padding-top:10px;
}
@media (min-width:400px){
.global-search {
padding: 20px 0;
text-align:center;
}
.global-search .form-control {
width:300px;
}
}
回答by jampafoo
So, using Bootstrap will automatically make the spans break to show full widths at a certain breakpoint... it does that for responsiveness! I usually have to create my own styles when i would like something to act as I want it. Which is totally ok!
因此，使用 Bootstrap 将自动使跨度中断以在某个断点处显示完整宽度......它这样做是为了响应！当我想要某些东西按照我的意愿行事时，我通常必须创建自己的风格。这完全没问题！
So, using inline styles just for a quick example, (you can turn them into proper styles for your stylesheet) you can do something like this with your search area... also updated the jsfiddle here
因此，使用内联样式只是一个简单的例子，（您可以将它们转换为样式表的正确样式）您可以在搜索区域中执行类似的操作...还在这里更新了 jsfiddle
<!-- Global Search -->
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<div style="width:75%; float: left;">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<div style="width: 25%; float: left; padding-left: 10px; box-sizing: border-box;">
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
<a href="#">Search Help</a>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
