For some reason, Bootstrap is placing my label in a different line than the radio button (codepen) when the label is sufficiently large:
Without Bootstrap, the exact same code works as expected, with the label next to the radio button:
* {
font-family: helvetica, arial, sans-serif
}
input[type="radio"] {
margin: 6px;
padding: 6px;
}
.choices {
border: 1px solid skyblue;
padding: 6px;
width: 600px;
border-radius: 8px;
}
.choice {
line-height: 24px;
margin: 4px;
display: inline-block;
}<div class="choices">
<div class="choice">
<input type="radio" name="answer" id="radio2" value="2">
<label for="radio2">Fusce euismod augue at diam semper congue.</label>
</div>
<div class="choice">
<input type="radio" name="answer" id="radio3" value="3">
<label for="radio3">Nullam nec ullamcorper justo, at lobortis libero. Praesent congue erat nibh, non tincidunt nisi tempor in. Nam eu mi sed nisl commodo dignissim sed non urna.</label>
</div>
<div class="choice4">
<input type="radio" name="answer" id="radio4" value="4">
<label for="radio4">Integer at convallis lorem.</label>
</div>
</div>How do I fix with CSS rules? I tried using Bootstrap's .form-horizontal and .form-inline classes, but that didn't work.
I cannot put the radio button inside the label. Although this will fix the way it is displayed, it breaks some very delicate Javascript somewhere else in the page