6g下载网
当前位置: 主页 > 软件教程 > 编程开发 >

Bootstrap复选框checkbox和单选按钮radio水平排列解决办法

时间: 2016-09-07 12:50 来源: 本站整理

分享到:

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

问题分析:

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

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

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

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

  1. <form role="form"> 
  2.   <div class="form-group"> 
  3.     <label class="checkbox-inline"> 
  4.       <input type="checkbox"  value="option1">游戏  
  5.     </label> 
  6.     <label class="checkbox-inline"> 
  7.       <input type="checkbox"  value="option2">摄影  
  8.     </label> 
  9.     <label class="checkbox-inline"> 
  10.     <input type="checkbox"  value="option3">旅游  
  11.     </label> 
  12.   </div> 
  13.   <div class="form-group"> 
  14.     <label class="radio-inline"> 
  15.       <input type="radio"  value="option1" name="sex">男性  
  16.     </label> 
  17.     <label class="radio-inline"> 
  18.       <input type="radio"  value="option2" name="sex">女性  
  19.     </label> 
  20.     <label class="radio-inline"> 
  21.       <input type="radio"  value="option3" name="sex">中性  
  22.     </label> 
  23.   </div> 
  24. </form> 

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

Bootstrap复选框checkbox和单选按钮radio水平排列解决办法

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

(责任编辑:6g下载网)

分享到:

------分隔线----------------------------