我正试图通过twitter引导来增大搜索栏的高度和字体大小。这样它也可以在响应模式下工作。
<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>
问题是,我在按钮上使用了BTN大类,但不知道是否有一个等效的方法,使搜索字段也更大…
任何帮助都将不胜感激。
最佳答案
不,只有用于文本输入的大小和对齐的类。而且你不能只添加BTN大,因为它被忽略了。但是,您可以使用与btn large完全相同的特性将内联css添加到输入中
style="padding: 11px 19px;font-size: 17.5px;"
或者在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>
完全对齐:-)
更新
我在响应式设计方面做了很多工作,例如
@media all { }
等等,但似乎没有什么真正起作用。无论如何,只要从类声明中删除span6
(我不明白为什么在<input>
-元素上应该是nesescary),它就可以在所有分辨率下工作!如
input.edit-btn-large {
font-size: 17.5px;
padding: 11px 19px;
}
和
<input type="text" class="search-query edit-btn-large" placeholder="Type here...">