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

Question

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

没有Bootstrap，完全相同的代码按预期工作，单选按钮旁边的标签：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

我只用float

解决了这个问题

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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