我正试图通过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...">

08-25 09:17
查看更多