用引导button排列标签

我有一个内联单选button和一个标签的Bootstrap表单。 我想保持标签在button的同一行,但我似乎无法做到这一点。 这是我的方法:

<form> <div class="control-group"> <label class="control-label">Some label</label> <div class="controls"> <label class="radio inline"> <input type="radio" value="1"/> First </label> <label class="radio inline"> <input type="radio" value="2"/> Second </label> </div> </div> </form> 

小提琴: http : //jsfiddle.net/GaDbZ/2/

我也试过这个:

 <form> <div class="form-inline"> <label class="control-label">Some label</label> <label class="radio"> <input type="radio" value="1"/> First </label> <label class="radio"> <input type="radio" value="2"/> Second </label> </div> </form> 

但是,一切都是在一起的。 小提琴: http : //jsfiddle.net/GaDbZ/3/

我怎样才能得到从第一个水平间距结合第二个垂直间距?

另外,我应该注意到,在现实生活中,我还有一些其他的东西在forms上,所以我不希望使用form-horizontal因为它会创造奇怪的边缘,而不会与其他东西在那里。

如果将'radio inline'类添加到user1938475提供的解决scheme中的控制标签,则应该与其他标签正确alignment。 或者如果你只使用第二个例子中的“收音机”,那么就包括“收音机”类。

 <label class="radio control-label">Some label</label> 

或“无线电内联”

 <label class="radio-inline control-label">Some label</label> 

Bootstrap 3以来,您必须在标签上使用checkbox-inline和radio-inline类。

这需要照顾垂直alignment。

 <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 </label> 

这可能适合你,请试试这个。

 <form> <div class="form-inline"> <div class="controls-row"> <label class="control-label">Some label</label> <label class="radio inline"> <input type="radio" value="1" />First </label> <label class="radio inline"> <input type="radio" value="2" />Second </label> </div> </div> </form> 

这一切都很好, 包括现场标签。 排队领域的标签是棘手的部分。

在这里输入图像说明

HTML代码:

 <div class="form-group"> <label class="control-label col-md-5">Create a</label> <div class="col-md-7"> <label class="radio-inline control-label"> <input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task </label> <label class="radio-inline control-label"> <input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note </label> </div> </div> 

CSHTML /剃刀代码:

 <div class="form-group"> @Html.Label("Create a", htmlAttributes: new { @class = "control-label col-md-5" }) <div class="col-md-7"> <label class="radio-inline control-label"> @Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task </label> <label class="radio-inline control-label"> @Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note </label> </div> </div> 

对我来说,主要的见解是: – 确保标签内容来自input广播领域之后 – 我调整了我的CSS让所有的东西都变得更近一些

 .radio-inline+.radio-inline { margin-left: 5px; }