Zurb基金会顶栏搜索输入

I'm using zurb foundation 4. I create a top bar with a search form within the same:

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

I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?

我需要增加搜索字段的大小而不会失去响应能力。有谁知道我该怎么办?

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

2 个解决方案

#1

If you're using SASS, simply change:

如果您正在使用SASS,只需更改:

input { height: $topbar-input-height }

To:

input { height: $topbar-height }

If you're using CSS, change the line with:

如果您使用的是CSS,请更改以下行:

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

To:

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

Follow a similar process if you wish to change the width.

如果要更改宽度,请执行类似的过程。

#2

I am a big fan of CDN, so editing the Foundation files is not an option.

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

Here is the workaround that works for me:

以下是适用于我的解决方法:

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

#1