引导复选框和标签在同一行答案

【问题标题】：bootstrap checkbox and label on same line引导复选框和标签在同一行
【发布时间】：2020-04-10 17:14:51
【问题描述】：

我无法将复选框和标签放在同一行。正确的引导方式是像这样将复选框包装在标签标签中-

<li>           
<label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label>
</li>

但我使用的是 CMS，它不会以这种方式创建复选框和标签，而是像这样生成它们 -

<li>
<input type="radio">
<label>She did her best to help him.</label>
</li>

这种方法的问题是复选框与标签位于不同的行。我可以将标签设置为 display: inline 并且这有效，但它会从我的表单中删除所有边距并且看起来不太好。

谁能帮我找到解决办法？这是js fiddle

【问题讨论】：

【解决方案1】：

你需要在 css 中做更多的工作......刚刚为你创建了一个新的小提琴。 Here it is.

li > input {
  display:inline-block;
  width:20px;
}
label { margin-bottom: 25px;
  display:inline-block;
  width:235px;
}

【讨论】：

【解决方案2】：

使用 Bootstraps 的 radio-inline 类：

将content 和radio input 包装在label 中，并使用radio-inline 类，然后您可以使用Bootstrap 将其放在同一行

【讨论】：

【解决方案3】：

尝试使用引导程序“checkbox”或“checkbox-inline”类

<div class="checkbox">
    <label><input type="checkbox" value="">Option 1</label>
</div>

【讨论】：