4

レスポンシブ モードでも機能するように、検索バーの高さとフォント サイズを twitter ブートストラップで大きくしようとしています。

<div class="hero-unit center">

    <h2>Search</h2>

    <form class="form-search">
        <div class="input-append">
            <input type="text" class="span6 search-query" placeholder="Type here...">
            <button type="submit" class="btn btn-large">
                <i class="icon-search"></i>
                Search
            </button>
        </div>
    </form>
</div>

ボタンでbtn-largeクラスを使用していますが、検索フィールドも大きくする同等の方法があるかどうかはわかりません..

どんな助けでも大歓迎です。

4

1 に答える 1

4

いいえ、テキスト入力のサイズと配置のクラスしかありません。また、無視されるため、 btn-large を追加することはできません。ただし、btn-large とまったく同じ機能を使用してインライン css を入力に追加できます。

style="padding: 11px 19px;font-size: 17.5px;"

またはCSSクラスで

input.edit-btn-large {
   padding: 11px 19px;
   font-size: 17.5px;
}

<form class="form-search">
  <div class="input-append">
     <input type="text" class="span6 search-query btn-large" placeholder="Type here..." style="padding: 11px 19px;font-size: 17.5px;">
       <button type="submit" class="btn btn-large">
          <i class="icon-search"></i>
          Search
      </button>
   </div>
</form>

完全に一致します:-)

ここに画像の説明を入力

アップデート

私はレスポンシブデザインなどをいじりましたが@media all { }、実際には何も機能していないようです。ただし、クラス宣言から削除するだけでspan6(これが - 要素で必要な理由がわかり<input>ません)、すべての解像度で機能します!

例えば

input.edit-btn-large {
   font-size: 17.5px;
   padding: 11px 19px;
}

と

<input type="text" class="search-query edit-btn-large" placeholder="Type here...">
于 2013-03-21T08:32:50.033 に答える