Bootstrap单选按钮与单选圆圈一起显示

Question

我正在创建一种捐赠表格，其中有两种捐赠方式：一次性捐赠或经常性捐赠。它显示在2列中，每列均包含带汇总金额的单选按钮和“其他”金额的输入。

因为用户只能选择一个选项，所以我有一个data-toggle="buttons"包围在两个列中的div。

按钮正确切换，但现在显示单选输入圆圈。

以下是显示问题的代码段：

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');		

.amt-section{
	padding: 20px 50px;
	
 }

#amt-msg-wrapper{
	background-color: #337ab7;
	color: #fff;
	padding: 20px 10px 10px 10px;
	margin-bottom: 20px;
}

#amt-msg{
	font-size: 1.3em;
	font-weight: 400;	
	text-align: center;
}
		
#one-time{
	background-color: #c0c0c0;
}
		
#recur{
	background-color: #f0f0f0;
}
		
#one-time, #recur {
	padding-bottom: 50px;
}

.amt-section h3{
	text-align: center;
 }
		  
.btn-group-justified{
  display: table;
}
		  

.blocks .btn-primary {
    padding: 12px 0px;
    border-radius: 0;
}
		  
.blocks {
	border-spacing: 10px 5px;
}
			 
/*****style other inputs*****/
			 
			 
#other-wrapper, #other-recur-wrapper{
padding-top: 6px;
 width: 100%;
 margin: auto;
/* background-color: red; */
 text-align: center;
}
			 
#btn-other, #btn-recur-other{
 float: none;
 padding: 10px 10px;
}		
		

.btn.btn-primary.active{
	background-color: orange!important;
}

   <div data-toggle="buttons">
			
          <div id="amt-wrapper" class="row">
            <div id="one-time" class="col-lg-6 col-md-12 col-sm-12 col-xs-12 amt-section">
              <h3>One-Time Donation</h3>
              
              <!-- <div data-toggle="buttons"> -->
              
              <div class="btn-group blocks btn-group-justified" >
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="25.00" autocomplete="off">
                  $25.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="50.00" autocomplete="off" >
                  $50.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="75.00" autocomplete="off">
                  $75.00 </label>
              </div>
              <div class="btn-group blocks btn-group-justified">
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="600.00" autocomplete="off">
                  $600.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="1000.00" autocomplete="off">
                  $1000.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="3600.00" autocomplete="off">
                  $3600.00 </label>
              </div>
              <div id="other-wrapper" class="btn-group blocks">
                <label id="btn-other" class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="other">
                  Other Amount </label>
                <!--<input name="OtherAmount" type="text" placeholder="Other"> -->
                <input id="txtOther" name="OtherAmount" type="text" placeholder="Enter amount as 0.00">
              </div>
              
              <!--    </div><!--End data-toggle div --> 
              
            </div>
            <!-- end one-time -->
            
            <div id="recur" class="col-lg-6 col-md-12 col-sm-12 col-xs-12 amt-section">
              <h3>Donate Monthly</h3>
              
              <!--<div data-toggle="buttons">-->
              
              <div class="btn-group blocks btn-group-justified" >
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$25.00">
                  $25.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$50.00">
                  $50.00 </label>
              </div>
              <div class="btn-group blocks btn-group-justified" >
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$84.00">
                  $84.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$300.00">
                  $300.00 </label>
              </div>
              <div id="other-recur-wrapper" class="btn-group blocks">
                <label id="btn-recur-other" class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="other">
                  Other Amount </label>
                <!--<input name="OtherAmount" type="text" placeholder="Other"> -->
                <input id="txt-recur-other" name="OtherAmount" type="text" placeholder="Enter amount as 0.00">
              </div>
              
              <!--	  </div> <!-- End data toggle --> 
              
            </div>
            <!-- end recur --> 
            
          </div>
          <!-- end amt-wrapper --> 
          
        </div>
        <!-- End data toggle --> 
        
        <!-- Begin Amount Selected Message -->
        <div id="amt-msg-wrapper" class="row">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <p id="amt-msg"> Your gift of any amount will help to bless Pittsburgh's most vulnerable children. </p>
          </div>
        </div>

我希望这有道理！非常感激任何的帮助。 ：）