bootstrap复选框和同一行上的标签

Question

我无法在同一行上找到我的复选框和标签。正确的引导方式是将复选框包装在label标签中，如下所示 -

<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 ，这样可行，但它会从我的表单中删除所有边距，看起来不太好。

任何人都可以帮我找到解决方案吗？这是https://stackoverflow.com/a/42123320/4495081

Answer 1

你需要在CSS中多做一些工作......为你创造了一个新的小提琴。 Here it is.

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

Answer 2

使用Bootstraps的radio-inline课程：

请参阅更新的小提琴：https://jsfiddle.net/xs04fqgo/1/

将content和radio input包裹在label内，使用radio-inline

Answer 3

尝试使用引导程序“复选框”或“复选框内联”类

"ID_Context":"protelIO"

参考： https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp