Bootstrap radio-inline line wrapping and stacked radio buttons

Question

Goal

I have a dynamic number of radio buttons. I want them to appear inline and drop down to the next row when needed. Depending on the screen size, I want them to stack.

Current Problem

Right now, I'm using:

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button's label 1
</label>

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button's label 2
</label>

...

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX">
    Radio button's label X
</label>

Those radio buttons as I said before are dynamic and there can be any number of them. They currently show up inline. But, when there are too many to fit on one row (even on a large monitor), they drop down and there is a margin-left: 10px associated with .radio-inline. So, the first radio button in rows 2, 3, 4, etc are 10px to the left of the first radio button in row 1. This is very noticeable when the screen is shrunk and all of the radio buttons are stacked. Again, row 1 is on the left, but every following row below it is pushed 10px to the right.

What I've Tried

I tried putting them in col-lg-#. As far as stacking goes, this works, but it causes word wrap on the radio button's labels.

Answer 1

I think it will be:

.radio-inline+.radio-inline {
    margin-left: 0;
}

.radio-inline {
    margin-right: 10px;
}

http://jsfiddle.net/rm7n73ep/