引导复选框和标签在同一行 [英] bootstrap checkbox and label on same line

问题描述

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

I can't get my checkboxes and labels on the same line. The proper bootstrap way is to wrap the checkbox in the label tag like this-

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

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

But I'm using a CMS and it does not create checkboxes and labels that way, instead they are generated like this-

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

此方法的问题是复选框与标签位于不同的行.我可以将标签设置为 display:inline ，并且可以正常工作，但是它会删除表单中的所有页边距，而且外观不太好.

The problem with this method is the checkboxes are on a different line to the label. I can set the label to display: inline and this works, but it removes all margins from my form and does not look very nice.

有人可以帮助我找到解决方案吗?这是 js小提琴

Can anyone help me to find a solution? Here is a js fiddle

推荐答案

您需要在CSS中做更多的工作...为您创建了一个新的小提琴.在这里.

You need a little more work in the css... Just created a new fiddle for you. Here it is.

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

这篇关于引导复选框和标签在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！