Css ZURB基金会顶部栏搜索输入 我使用Zurb基金会4。 我创建了一个顶部栏，其中包含一个搜索表单： <nav class="top-bar"> <ul class="title-area"> <li class="name"> <h1><a href="#">Title</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <!-- Left Nav Section --> <ul class="left"> <li class="has-form"> <form> <div class="row collapse" > <div class="small-10 columns"> <input type="text"> </div> <div class="small-2 columns"> <a href="#" class="alert button">S</a> </div> </div> </form> </li> </ul> <!-- Right Nav Section --> <ul class="right"> <li class="divider"></li> <li class="has-dropdown"><a href="#">Drop1</a> <ul class="dropdown"> <li><a href="#">Dropdown Level 3a</a></li> <li><a href="#">Dropdown Level 3b</a></li> <li><a href="#">Dropdown Level 3c</a></li> </ul> </li> <li class="divider"></li> <li class="has-dropdown"><a href="#">Drop2</a> <ul class="dropdown"> <li><a href="#">Dropdown Level 3a</a></li> <li><a href="#">Dropdown Level 3b</a></li> <li><a href="#">Dropdown Level 3c</a></li> </ul> </li> </ul> </section>

我需要在不失去响应的情况下增加搜索字段的大小。有人知道我该怎么做吗

---

如果您正在使用SASS，只需更改：

input { height: $topbar-input-height }

致：

如果使用CSS，请使用以下命令更改行：

.top-bar input { height: 2.45em; }

致：

---

如果您希望更改宽度，请遵循类似的过程。

< P>我是CDN的大粉丝，所以编辑基础文件不是一个选项。

以下是适合我的解决方法：

.top-bar input {
  height: auto !important;
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}

---

您可以在JSFIDLE上创建吗？

.top-bar input { height: 45px; }

.top-bar input {
  height: auto !important;
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}