Case entrées mal alignées quand il n'y a pas d'étiquette à l'aide de Bootstrap et MVC5
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:
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"> </label>
</div>
</div>
</div>
J'obtiens ceci:
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; } ?
Vous devez vous connecter pour publier un commentaire.
J'ai mis en place un Helper Html CheckBoxForBootstrap qui met la case à cocher dans une étiquette, mais sans le texte de l'étiquette n'est donc pas redondant étiquette, mais vous avez encore de la mise en forme souhaitée. Le champ caché nécessaire par le modèle mvc liant est ajouté, après l'étiquette doit être valide en html.
Au lieu de
@Html.EditorFor(model => model.IsUrgent)
ajoutez le code suivant. Vous pouvez mettre le champ caché à l'extérieur de lalabel
tag.DÉMO
Merci!
@Html.EditorFor(model => model.IsUrgent)
sorties tous les deuxlabel
bootstrap
nous définissons le texte à la fin de la case (getbootstrap.com/css/#forms), mais dans votre cas, vous avez besoin pour garder l'étiquette à l'avant. Nous avons donc besoin de cette étiquette avec
pour obtenir lebootstrap
les styles de travail. Nous pouvons donc utiliser cette méthode comme une alternative. Merci!J'ai eu le même problème, et de changer la classe sur la div qui entoure la case à cocher. Essayez:
Avertissement: Solution avec CSS
Je l'ai résolu de cette façon:
À l'aide de cette classe CSS:
Qui génère cette:
Comme on peut le voir ici, il a l'avantage de ne pas ajouter de l'espace vertical avant ou après la case de la ligne.
DÉMO
vous pouvez essayer quelques-uns de code j'ai partagé sur mon compte github : icheck-bootstrap
Vous pouvez voir la démo ici:
HTML:
il suffit de retirer la div avec la "case" de la classe sorrounding votre e case et l'étiquette et le problème disparaîtra
et l'ordre inverse