1

私は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

4

2 に答える 2

0

私は CDN の大ファンなので、Foundation ファイルを編集することはできません。

これが私のために働く回避策です：

.top-bar input {
  height: auto !important;
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}
于 2014-09-17T12:20:07.603 に答える