0

水平形式

上面的表格在桌面版上看起来很棒，但在平板电脑和移动版上，营销需要这些标签（名称、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>
4

1 回答 1

0

不是一个真正的答案，但您可能会发现它很有帮助：大多数用户体验测试数据似乎都支持这样一个事实，即水平表单通常更难让用户开始使用。因此，如果您需要移动平台的垂直表单，无论视口大小/类型如何，我都会强烈考虑只使用垂直表单。

（这并不是说每个字段都需要单独一行，例如名字/姓氏字段，但是对于大多数输入，它们应该从上到下流动，字段标签位于字段输入的顶部。）

于 2013-09-03T17:09:10.963 回答