twitter bootstrap - 增加表单字段的高度以匹配按钮

Question

我正在尝试使用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>

问题是我在按钮上使用btn-large类但不知道是否有相同的方法使搜索字段也更大..

任何帮助将不胜感激。

Answer 1

不，只有文本输入的大小和对齐类。你不能添加btn-large，因为它被忽略了。但是，您可以使用与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 { }等等，但似乎没有任何效果。 Hovever，只是从类声明中删除span6（我无法理解为什么这个应该是<input> - 元素上的nessecary）并且它适用于所有分辨率！

例如

input.edit-btn-large {
   font-size: 17.5px;
   padding: 11px 19px;
}

和

<input type="text" class="search-query edit-btn-large" placeholder="Type here...">