0

ここに入力タイプとボタンタイプのフォームがあります

<div class="span12" style="margin-left: 10px; margin-right: 5px;">
    <div class="row-fluid mt20">
        <div id="searchBox">
        <form id="general-search-form" autocomplete="off">
            <input type="text" placeholder="" class="search-query" name="q" />
                <button type="submit" class="btn pull-right" title="search"></button>
        </form>
        </div>
    </div>
</div>

デスクトップバージョンでは、入力タイプが50％の幅を占め、検索ボタンが50％の幅を占めるようなレイアウトが必要です。モバイルバージョンでは、入力タイプが上にあり、検索ボタンが下にある必要があります。どうやってするの。

4

2 に答える 2

1

私はあなたがおそらくこのようなものを持ちたいと思うと思います...

<form>
<div class="container-fluid">
 <div class="row-fluid">
  <div class="span6">
   <input type="text" class="input-block-level">
  </div>
  <div class="span6">
   <button type="submit" class="btn custom-button">Search</button>
  </div>
 </div>
</div>
</form>

次に、ボタンを自分でスタイリングして、span6の全幅を占めるようにする必要があります。

.custom-button {
    width: 100%;
}

パディングと境界線を考慮したボタン幅については、おそらく試行錯誤が必要です。

于 2013-03-21T10:40:46.560 に答える
0

float:left幅を50％に設定して、ブラウザCSSの両方の要素に設定します。モバイルデバイスのCSSにはを使用しますfloat:none。幅を100％にしてみてください。

これにより、必要な出力が得られます。微調整が必​​要な場合とない場合があります。

于 2013-03-21T07:31:27.373 に答える