今天小编整理一篇Bootstrap复选框checkbox和单选按钮radio水平排列解决办法的文章和大家分享，希望能给大家提供帮助。

问题分析：

为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：

1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

Bootstrap复选框checkbox和单选按钮radio水平排列源代码：

<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> 

Bootstrap复选框checkbox和单选按钮radio水平排列效果图:

Bootstrap复选框checkbox和单选按钮radio水平排列解决办法的文章和大家分享结束，感谢阅读!