Question

我不明白为什么我的“就业类型”字段没有与表格上的其他职位排成一行。小提琴在这里提供：http://jsfiddle.net/mwoods98/GvjXE/。我认为我正在使用control-label类，但是，作为一个新的bootstrap采用者，我可能犯了一个错误。这是代码片段，但您可以在上面列出的jsfiddle上看到一个工作副本。

<label class="control-label" for="input04">Employment Type</label>
<div class="controls">
<select id="input04" name="EmpType">
<option value=""></option>
</select>
</div>

^^不工作

<label class="control-label" for="input05">Grade Level</label>
<div class="controls">
<select id="input05" name="Grdlvl">
<option value=""></option>
</select>
</div>

^^工作。

Answer 1

问题似乎是之前controls DIV中的内联单选按钮。如果你给他们班级容器，就业水平也正确排列：

<label class="control-label" for="input03">
  Gender
</label>
<div class="controls container">
  <label class="radio inline">
    <input id="input03" type="radio" name="optionsRadios" id="optionsRadios1" value="Male">Male
  </label>
  <label class="radio inline">
    <input  id="input03" type="radio" name="optionsRadios" id="optionsRadios1" value="Female">Female
  </label>
</div>

Answer 2

您应该将整个控件内容包装在control-group中。像这样：

<div class="control-group">
    <label class="control-label">Employment Type</label>
    <div class="controls">
        <select id="input04" name="EmpType">
            <option value=""></option>
        </select>
    </div>
</div>

修改

工作示例：http://jsfiddle.net/AZdwv/

Answer 3

将.clearfix添加到包含单选按钮的.control div中，似乎可以修复它。

http://jsfiddle.net/GvjXE/7/

<div class="controls clearfix">
    <label class="radio inline">
    <input id="input03" type="radio" name="optionsRadios" id="optionsRadios1" value="Male">Male</label>
    <label class="radio inline">
    <input  id="input03" type="radio" name="optionsRadios" id="optionsRadios1" value="Female">Female</label>
</div>

Twitter Bootstrap - 列未对齐

3 个答案: