如何垂直對齊單選按鈕

Question

我有以下標記：

<div class="container-fluid"> 
    <h2>Transfer Options:</h2> 
    <div class="row well well-sm"> 
     <div class="col-xs-6"> 
     <div id="sendTypeRadio" class="btn-group-vertical" > 
      <span class="input-group-addon"> 
      <input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email 
      </span> 
      <span class="input-group-addon"> 
      <input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments 
      </span> 
      <span class="input-group-addon"> 
      <input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments 
      </span> 
     </div><!-- /input-group --> 
     </div><!-- /.col-xs-6 --> 
    </div> 
</div> 

問題是按鈕都是彼此相鄰於x軸。我一直在改變一些事情。將它移出行標記並返回，移除幾乎所有格式等。我想要維護的是input-group-addon樣式，但我希望每個按鈕位於新行上。我搜索過，沒有發現任何線索？

Answer 1

在問我的問題，我想出了一個非常糟糕的答案：

<div class="container-fluid"> 
<h2>Transfer Options:</h2> 
<div class="row well well-sm"> 
    <div class="col-xs-6"> 
    <div id="sendTypeRadio" class="btn-group-vertical" > 
     <div class="row"> 
     <div class="col-xs-2"> 
     <span class="input-group-addon"> 
     <input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email 
     </span> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-2"> 
     <span class="input-group-addon"> 
     <input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments 
     </span> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-2"> 
     <span class="input-group-addon"> 
     <input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments 
     </span> 
     </div> 
     </div> 
    </div><!-- /input-group --> 
    </div><!-- /.col-xs-6 --> 
</div> 

這給我的每個項目上了一個新行，但絕對廢墟Bootstrap radio buttons