How to vertically align radio buttons - radio-button

Question

I have the following markup:
<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>
The problem is the buttons are all next to each other on the x-axis. I have been changing things for a day. Moving it out of the row tag and back in, removing almost all the formatting and such. What I want to maintain is the input-group-addon styling, but I want each button on a new row. I've searched and found nothing, any clues?

Answer 1

In asking my question I came up with a really crappy answer:
<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>
This gives me each item on a new row but absolutely ruins the styling of Bootstrap radio buttons