html - 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 { }等等，但似乎没有什么真正起作用。然而，只需span6从类声明中删除（我不明白为什么这应该在 -element 上是必要<input>的），它适用于所有分辨率！

例如

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

和

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