引导表单上的阵容标签

Question

我有一个引导程序表单，我想将国家标签与国家/地区选择元素一起排列，目前代码呈现如下：

我的来源如下：

<fieldset>
    <label class="control-label" for="firstName">Billing Contact</label>
    <div class="controls controls-row">
        <input id="firstName" class="span3" type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', attr: { placeholder: 'First Name' }" />
        <input id="lastName" class="span3" type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Last Name' }" />
    </div>
    <div class="controls controls-row">
        <input id="address1" class="span6" type="text" data-bind="value: address1, valueUpdate: 'afterkeydown', attr: { placeholder: 'Street Address' }" />
    </div>
    <div class="controls controls-row">
        <input id="address2" class="span6" type="text" data-bind="value: address2, valueUpdate: 'afterkeydown', attr: { placeholder: 'Apt, Suite, Building (optional)' }" />
    </div>
    <div class="controls controls-row">
        <input id="city" class="span4" type="text" data-bind="value: city, valueUpdate: 'afterkeydown', attr: { placeholder: 'City' }" />
        <input id="PostalCode" class="span2" type="text" data-bind="value: postalCode, valueUpdate: 'afterkeydown', attr: { placeholder: 'Postal Code' }" />
    </div>
    <div class="controls controls-row">
        <label class="control-label">Country</label>
        <select id="country" class="span4" data-bind="options: countriesList, optionsText: 'name', optionsValue: 'code', value: selectedCountry, attr: { placeholder: 'Country' }" />
    </div>
</fieldset>

我有两个问题：

1. 如何将国家/地区标签内嵌呈现
2. 如何渲染内联，但是让国家选择占用剩余的宽度（因此框的右边与其他span6元素对齐）

http://jsfiddle.net/isherwood/rqjB2/

Answer 1

修改上一个controls-row：

<div class="controls controls-row">
  <label class="control-label">Country</label>
  <select id="country" class="span4" />
</div>

如上所述，将controls controls-row更改为control-group form-inline并在内部添加<div class="controls"></div>：

<div class="control-group form-inline">
  <div class="controls">
    <label class="control-label">Country</label>
    <select id="country" class="span4" />
  </div>
</div>

Answer 2

1. 在表单元素上使用form-horizontal类
2. 您可以使用input-block-level类使元素填充其父容器的宽度。 * 注意，如果您使用form-horizontal，则可以使用span6，因为form-horizontal会使所有表单元素垂直对齐。

Here就是一个例子。我必须在“Controls”容器div之外移动“Country”标签才能使其正常工作。