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下載網)

分享到:

------分隔線----------------------------
? 35选7福利彩票