用引导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; }
