css - 使用 Bootstrap 均匀分开单选按钮

Question

我的单选按钮靠得太近了，我希望使用 bootstrap 网格系统将它们均匀地显示在一行中。关于如何完成此操作的任何想法？

    <div class="radio">
       <div class="row">
         <div class="col-md-12">
           <label>
             <input id="visitors_radio" name="user[role]" type="radio">
             Visitors
           </label>
           <label>
             <input id="staff_radio" name="user[role]" type="radio">
             Staff
           </label>
           <label>
             <input id="volunteer_radio" name="user[role]" type="radio">
             Volunteer
           </label>
         </div>
       </div>
    </div>

Answer 1

<div class="radio">
   <div class="row">
     <div class="col-md-4">
       <label>
         <input id="visitors_radio" name="user[role]" type="radio">
         Visitors
       </label>
     </div>
     <div class="col-md-4">
       <label>
         <input id="staff_radio" name="user[role]" type="radio">
         Staff
       </label>
     </div>
     <div class="col-md-4">
       <label>
         <input id="volunteer_radio" name="user[role]" type="radio">
         Volunteer
       </label>
     </div>
   </div>
</div>

利用 Bootstrap 网格来帮助您实现这一目标。