有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”
如下所示：

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戲
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">攝影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

運行效果如下或查看右側(cè)結(jié)果窗口：

實現(xiàn)源碼請查看bootstrap.css文件第1767行～第1780行：

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}