html - 当标签太长时，Bootstrap 单选按钮和标签在不同的行中

Question

出于某种原因，当标签足够大时，Bootstrap 会将我的标签放在与单选按钮 ( codepen ) 不同的行中:

在没有 Bootstrap 的情况下，完全相同的代码可以按预期工作，标签位于单选按钮旁边:

* { 
    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>

如何修复 CSS 规则？我尝试使用 Bootstrap 的 .form-horizo​​ntal 和 .form-inline 类，但这没有用。

我无法将单选按钮放在标签内。虽然这将修复它的显示方式，但它会破坏页面其他地方的一些非常微妙的 Javascript

Answer 1

好吧，我用 float

解决了这个问题

.choices input[type="radio"]{
  float:left;
}

* { 
    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;
}

.choices input[type="radio"]{
  float:left;
}
.choices .choice4{
  margin: 4px;
}

<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>