Question

我在创建一个＆＃34; form-horizontal＆＃34;用bootstrap。

正如你在jsfiddle中看到的标签＆＃34;出生日期＆＃34;未在出生日期之前正确对齐＆＃34;出生日期选择＆＃34;

<form class="form-horizontal">
<div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
        <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
    </div>
</div>

<div class="form-group">
    <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="year"/>
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="month"/>
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="day"/>
    </div>    
</div>

由于

Answer 1

将所有现有select divs包装在具有div类的新容器form-group中。

<div class="form-group">
    <div class="col-xs-4">
         <select type="text" class="form-control" id="field-day" required>
             <option>DD</option>
         </select>
    </div>
    <div class="col-xs-4">
         <select type="text" class="form-control" id="field-month" required>
             <option>MM</option>
         </select>
    </div>
    <div class="col-xs-4">
         <select type="text" class="form-control" id="field-year" required>
             <option>YYY</option>
         </select>
    </div>
</div>

工作小提琴： 的 http://jsfiddle.net/jo0b6yod/2/

Answer 2

在div标签中包含标签，该标签应使标签处于块级别，并占用其父级的100％。

例如：

<div class="form-group">
    <div><label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label></div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder="year"/>
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder="month"/>
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder="day"/>
  </div>    
</div>

Bootstrap“形式水平”和标签

2 个答案: