Case entrées mal alignées quand il n'y a pas d'étiquette à l'aide de Bootstrap et MVC5

Bootply de jouer avec

Visual Studio 2013 génère les éléments suivants CSHTML lorsque l'échafaudage d'une modification en vue d'un modèle booléen:

<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>

Après le passage du Rasoir vous obtenez ceci:

<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 toutefois n'aime pas cette façon d'utiliser les étiquettes parce que c'est le résultat:

Case entrées mal alignées quand il n'y a pas d'étiquette à l'aide de Bootstrap et MVC5

Notez que la case à cocher est placé trop à gauche.

Si j'enveloppe mon entrée dans une fausse étiquette avec certains espaces, c'est à dire.

<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">&nbsp;</label>
      </div>
    </div>
</div>

J'obtiens ceci:

Case entrées mal alignées quand il n'y a pas d'étiquette à l'aide de Bootstrap et MVC5

qui a l'air bien mais il n'est pas valide HTML:

L'étiquette de l'élément peut contenir au plus une entrée, bouton, select, textarea, ou keygen descendant.

Je fais quelque chose de mal avec mes classes CSS?

Modifier

Si je déplace le deuxième input à l'extérieur de la label comme @Saranga suggère, je suis toujours à gauche avec la redondant label qui sert aucune fonction sémantique ...

  • Est-il un problème avec y compris une règle sur le site.fichier css: .case > input[type=checkbox]{ margin-left:0; } ?
InformationsquelleAutor janv8000 | 2014-07-15