twitter-bootstrap - さまざまなビューポートでの Twitter Bootstrap 水平フォームから垂直フォームへ

Question

上記のフォームはデスクトップ バージョンでは見栄えがしますが、タブレットとモバイルでは、マーケティングではこれらのラベル (名前、SKU、ID) を上部に、テキスト ボックス (名前、SKU、ID) を下部に配置する必要があります。ブートストラップはそれを行うためのクラスや調整を提供していますか? どんな助けでも大歓迎です。どうも。

以下は私のBootstrap CSSです。

<div class="text-left">    
<div class="span12"> 
<div>
<h3 id="header">List of All Active Products</h3>
</div>       
<div class="row-fluid control-group form-inline">
<div class="span3">
<label for="ProductName">Name:</label>
<div class="input-append">
<input type="text" class="input-small search-query" placeholder="Name..."
id="ProductName" /><a href="#"><span class="add-on"><i class="icon-search icon- 
white"></i></span></a>
</div>
</div>
<div class="span3">
<label for="ProductSKU">SKU:</label>
<div class="input-append">
<input type="text" class="input-small search-query" placeholder="Product SKU..."
id="ProductSKU" /><a href="#"><span class="add-on"><i class="icon-search icon-white"></i></span></a>
 </div>
 </div>
 <div class="span3">
 <label for="ProductID">ID:</label>
 <div class="input-append">
 <input type="text" class="input-small search-query" placeholder="ID..."
 id="ProductID" /><a href="#"><span class="add-on"><i class="icon-search icon-
 white"></i></span></a>
 </div>
 </div>
 <div class="span3 text-right">
 <a href="/Products/AddProduct">+ Product</a>
 </div>
 </div>
 </div>
 </div>

Answer 1

本当の答えではありませんが、参考になるかもしれません: ほとんどのユーザー エクスペリエンス テスト データは、ユーザーが最初から横向きのフォームを使用するのが一般的に難しいという事実を裏付けているようです。したがって、モバイル プラットフォームに縦型フォームが必要な場合は、ビューポートのサイズやタイプに関係なく、縦型フォームを使用することを強く検討します。

(これは、すべてのフィールドを独自の行に配置する必要があると言っているわけではありません。たとえば、名/姓フィールドなどです。ただし、ほとんどの入力では、フィールド入力の上にフィールド ラベルを付けて、上から下にフローする必要があります。)