bootstrap 复选框和标签在同一行

Question

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

 <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小提琴

原文由 ScreamQueen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 css 中做更多的工作…刚刚为您创建了一个新的小提琴。 这里是。

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

原文由 Joram Clervius 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 Bootstraps 的 radio-inline 类：

查看更新的小提琴： https ://jsfiddle.net/xs04fqgo/1/

Wrap the content and radio input within a label with class radio-inline , then you can make it on the same line using Bootstrap

原文由 Harikrishnan N 发布，翻译遵循 CC BY-SA 3.0 许可协议