Visual Studio 2013 генерирует следующий CSHTML при создании леса для редактирования с моделью с булевым:
<div class="form-group">
@Html.LabelFor(model => model.IsUrgent, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.IsUrgent)
</div>
</div>
</div>
Пройдя через Razor, вы получите следующее:
<div class="form-group">
<label class="control-label col-md-2" for="IsUrgent">Is bad :(</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkbox" value="true">
<input name="IsUrgent" type="hidden" value="false">
</div>
</div>
</div>
Twitter Bootstrap 3.2 однако не любит этот способ использования меток, потому что это результат:
Обратите внимание, что флажок расположен слишком много влево.
Если я помещаю свой ввод в фиктивную метку с некоторым пробелом, т.е.
<div class="form-group">
<label class="control-label col-md-2" for="IsUrgent">Is good!</label>
<div class="col-md-10">
<div class="checkbox">
<label><input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkbox" value="true">
<input name="IsUrgent" type="hidden" value="false"> </label>
</div>
</div>
</div>
Я получаю это:
который выглядит неплохо, но недействителен HTML:
Элемент label может содержать не более одного входа, кнопки, select, textarea или потокового потомка.
Я делаю что-то не так с моими классами CSS?
Edit
Если я перемещаю второй input
вне label
, поскольку @Saranga предполагает, что я все еще остаюсь с избыточным label
, который не использует семантическую функцию...