当标签太长时，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-horizontal和.form-inline类，但这不起作用。

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

Answer 1

将 .row 类添加到您的 div 中。请参阅下面的示例。

* { 
    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 row">
        
        <label for="radio3"><input type="radio" name="answer" id="radio3" value="3"> 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>

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

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