Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。

<form role="form"><div class="checkbox"><label><input type="checkbox" value="">记住密码</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="http://www.mamicode.com/love" checked>喜欢</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="http://www.mamicode.com/hate">不喜欢</label></div></form>

运行效果如下或查看右侧结果窗口（案例1）：

从上面的示例，我们可以得知： 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

有时候，为了布局的需要，将复选框和单选按钮需要水平排列。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="http://www.mamicode.com/option1">游戏    </label>    <label class="checkbox-inline">      <input type="checkbox"  value="http://www.mamicode.com/option2">摄影    </label>    <label class="checkbox-inline">    <input type="checkbox"  value="http://www.mamicode.com/option3">旅游    </label>  </div>  <div class="form-group">    <label class="radio-inline">      <input type="radio"  value="http://www.mamicode.com/option1" name="sex">男性    </label>    <label class="radio-inline">      <input type="radio"  value="http://www.mamicode.com/option2" name="sex">女性    </label>    <label class="radio-inline">      <input type="radio"  value="http://www.mamicode.com/option3" name="sex">中性    </label>  </div></form>

运行效果如下或查看右侧结果窗口：