twitter-bootstrap twitter bootstrap - 增加表单字段的高度以匹配按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15538513/
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 - increasing the height of a form field to match button
提问by sambehera
I'm trying to make the height and font size of my search bar larger with twitter bootstrap.. such that it also works in responsive mode.
我正在尝试使用 twitter bootstrap 使我的搜索栏的高度和字体大小变大......这样它也可以在响应模式下工作。
<div class="hero-unit center">
<h2>Search</h2>
<form class="form-search">
<div class="input-append">
<input type="text" class="span6 search-query" placeholder="Type here...">
<button type="submit" class="btn btn-large">
<i class="icon-search"></i>
Search
</button>
</div>
</form>
</div>
the thing is that im using btn-large class on the button but dont know if there is an equivalent way to make the search field also larger..
问题是我在按钮上使用 btn-large 类，但不知道是否有等效的方法使搜索字段也更大..
any help would be much appreciated.
任何帮助将非常感激。
回答by davidkonrad
No, there is only classes for size and alignment for text input. And you cant just add btn-large since it is ignored. However, you can add inline css to the input with the exact same features as btn-large
不，只有文本输入的大小和对齐类。你不能只添加 btn-large 因为它被忽略了。但是，您可以将内联 css 添加到具有与 btn-large 完全相同的功能的输入中
style="padding: 11px 19px;font-size: 17.5px;"
or in a CSS class
或在 CSS 类中
input.edit-btn-large {
padding: 11px 19px;
font-size: 17.5px;
}
<form class="form-search">
<div class="input-append">
<input type="text" class="span6 search-query btn-large" placeholder="Type here..." style="padding: 11px 19px;font-size: 17.5px;">
<button type="submit" class="btn btn-large">
<i class="icon-search"></i>
Search
</button>
</div>
</form>
aligns perfectly :-)
完美对齐:-)
Update
更新
I've messed a lot around with responsive design, eg @media all { }and so on, but nothing seems to really work. Hovever, just remove span6from the class-declaration (I cannot see why this should be nessecary on the <input>-element anyway) and it works in all resolutions!
我在响应式设计方面搞砸了很多，例如@media all { }等等，但似乎没有任何效果。但是，只需span6从类声明中删除（我不明白为什么这应该在 -element 上是必要的<input>）并且它适用于所有分辨率！
eg
例如
input.edit-btn-large {
font-size: 17.5px;
padding: 11px 19px;
}
and
和
<input type="text" class="search-query edit-btn-large" placeholder="Type here...">
