Alignement des étiquettes avec des boutons radio dans bootstrap
J'ai un formulaire Bootstrap avec quelques boutons radio en ligne et une étiquette. J'aimerais garder l'étiquette sur la même ligne que les boutons, mais je n'arrive pas à y arriver. Voici mon approche:
<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>
Violon: http://jsfiddle.net/GaDbZ/2/
J'ai aussi essayé ceci:
<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>
Mais tout est smooshed ensemble. Violon: http://jsfiddle.net/GaDbZ/3/
Comment puis-je obtenir l'espacement horizontal du premier combiné avec l'espacement vertical de la deuxième?
Aussi, je devrais noter que dans la vraie vie, j'ai un tas d'autres choses qui se passent dans le formulaire, donc je ne veux pas utiliser form-horizontal parce que cela crée des marges géniales qui ne jive pas avec les autres choses que j'ai là-dedans.
5 réponses
Si vous ajoutez la classe' radio inline ' à l'étiquette de contrôle dans la solution fournie par user1938475, elle devrait s'aligner correctement avec les autres étiquettes. Ou si vous utilisez uniquement 'radio' comme votre 2ème exemple, incluez simplement la classe 'radio'.
<label class="radio control-label">Some label</label>
Ou pour 'radio inline'
<label class="radio-inline control-label">Some label</label>
Depuis Bootstrap 3, vous devez utiliser case-inline et de la radio en ligne classes sur l'étiquette.
Cela prend soin de l'alignement vertical.
<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>
Cela peut fonctionner pour vous, veuillez essayer ceci.
<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>
Tout cela est bien aligné y compris l'étiquette de champ. Aligner l'étiquette de terrain était la partie délicate.
Code 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>
Code CSHTML / Razor:
<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>
Les idées clés pour moi étaient: - assurez - vous que le contenu de l'étiquette vient après le champ d'entrée-radio - J'ai peaufiné mon css pour tout rapprocher un peu
.radio-inline+.radio-inline {
margin-left: 5px;
}