html - 使某些表单字段与标签内联

Question

默认情况下，我所有的输入字段的宽度都是 100%。对于我的表单字段之一，我需要标签与输入字段内联。其余的都可以堆叠。我尝试了以下但它仍然将输入字段推到其标签下方:

<div class="form-inline">
    <div class="form-group">
        <asp:Label ID="fieldLabel1" runat="server" Text="Field label 1" AssociatedControlID="ntxtFieldLabel1"></asp:Label>
        <telerik:RadNumericTextBox ID="ntxtFieldLabel1" runat="server" Width="100%" CssClass="form-control"></telerik:RadNumericTextBox>
    </div>                                                    
</div>

Answer 1

您可以使用 col-*-* 类标签来设置所需的 cols 数量。

例如，您使用类 col-md-2 为 2 列设置标签。 对于输入元素，最佳做法是使用父 div 容器。 然后在这个父级上使用类 col-md-10 设置列数。

<div class="form-horizontal">
   <div class="form-group">
      <label class="control-label col-md-2" for="BrandId">Merk</label>
      <div class="col-md-10">
          <input type="text" class="form-control"></input>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-2" for="BrandId">Merk</label>
      <div class="col-md-10">
          <input type="text" class="form-control"></input>
      </div>
    </div>
</div>

请看我的 fiddle 示例:

http://jsfiddle.net/VDesign/0vp9aL61/