twitter-bootstrap - 引导表单上的阵容标签

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会让你的所有表单元素垂直对齐。

这是一个例子。我必须将“国家”标签移到“控件”容器 div 之外，才能正常工作。