Zurb基礎頂部欄搜索輸入

Question

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

我需要增加的大小搜索字段而不會失去響應。有誰知道我該怎麼辦？

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的忠實粉絲，因此編輯基礎文件不是一個選項。

下面是對我的作品的解決辦法：

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