0

Twitter Bootstrap を使用してレスポンシブ サイトを作成しています。私はフレームワークが大好きで、ヘッダーにある検索フォームを除いて、すべて正常に動作します。その種類は大きく、7 グリッドを超えて拡張されます。ウィンドウを約 512 px より小さくすると、送信ボタンが入力領域の下に突然滑り落ちます。これはあまりきれいではありません。私は「form-horizo​​ntal」クラスを使用しています。これは、ドキュメントで使用する必要があることが示唆されています。

フォーム セクションのコードは次のとおりです。どんな助けでも大歓迎です！ 

<div class="row">
<div class="span7">



<form class="form-horizontal" id="searchfield" action="search.php" method="get">

 <input  name="address" placeholder="Write something..." type="text" class="span7 search-query field">
 <button type="submit" class="btn-primary">Search</button>

</form>


</div>


<div class="span4">
<a href="form1.php"><button type="submit" class="btn btn-large btn-inverse span4">Skapa    boende</button></a>
</div>

</div>
4

1 に答える 1

0

ブートストラップレスポンシブが行うことは、サイトをユーザーのビューポートに「レスポンシブ」にすることです。つまり、ビューポートの幅が特定のポイントを下回ると、レイアウトが変更されます。レスポンシブ シートは、.span1-12その特定のポイントより下ではもうフロートしないと定義しています。したがって、一方を他方の下に配置します。

これが発生したくない場合は、次のことを行う必要があります。レスポンシブ シートを削除する、または b. いくつかのクレイジーな醜い回避策を実行してください。最後のものは、やってはいけないことです。おそらくうまくいくでしょうが、機能が壊れる可能性は非常に高いです。

とはいえ、言及する価値があるかもしれません。彼が「デスクトップ列」と呼んだものを含む、ブートストラップ用のいくつかのきちんとした拡張機能を作成した男 (Arnold Daniels) がいます。これは単なる行ですが、レスポンシブな変更はタブレット ビューポートから始まります。これはあなたが望むものではありませんが、レスポンシブ シートを変更できることを示しています。

于 2013-02-14T16:52:52.680 に答える