css - zurb基础顶栏搜索输入

Question

我正在使用 zurb Foundation 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>

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

http://cl.ly/image/1a412p3M3e1J

Answer 1

如果您使用的是 SASS，只需更改：

input { height: $topbar-input-height }

至：

input { height: $topbar-height }

如果您使用的是 CSS，请将行更改为：

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

至：

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

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

Answer 2

我是 CDN 的忠实粉丝，所以编辑 Foundation 文件不是一个选项。

这是对我有用的解决方法：

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