Bootstrap 3 2 colonnes
Je suis en train de faire un bootstrap horizontale formulaire avec 2 colonnes. La question que je suis en cours d'exécution n'est pas tout sur la deuxième colonne va avoir quelque chose et j'ai besoin de faire un "espace vide" de la taille de la première colonne.
J'essaie d'avoir le temps de la fin, étiquette être en ligne avec l'heure de début de l'étiquette.
<form class="form-horizontal container" role="form" name="event" ng-controller="eventFormController">
<div class="row hidden-xs">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="selectBusinesses" class="col-sm-3 col-md-3 col-lg-2 control-label">Businesses</label>
<div class="col-sm-5 col-md-4 col-lg-3">
<select id="selectBusinesses" class="form-control" ng-model="event.business" name="businesses" ng-options=""></select>
</div>
<div class="col-sm-4 col-md-4 col-lg-3">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span></button>
</div>
</div>
<div class="form-group">
<label for="selectEventType" class="col-sm-3 col-md-3 col-lg-2 control-label">Event Type</label>
<div class="col-sm-9 col-md-6 col-lg-5">
<select id="selectEventType" class="form-control" ng-model="event.eventType" name="eventType" ng-options=""></select>
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 col-md-3 col-lg-2control-label">Status</label>
<div class="col-sm-9 col-md-6 col-lg-5">
{{event.status}}
</div>
</div>
<div class="form-group">
<label for="inputTopic" class="col-sm-3 col-md-3 col-lg-2 control-label">Topic</label>
<div class="col-sm-9 col-md-6 col-lg-5">
<input type="text" class="form-control" id="inputTopic" ng-model="event.topic" name="topic" ng-maxlength="100" />
</div>
</div>
<div class="form-group">
<label for="inputStartTime" class="col-sm-3 col-md-3 col-lg-2 control-label">Start Time</label>
<div class="col-sm-9 col-md-6 col-lg-5">
<timepicker ng-model="event.startTime" hour-step="hStep" minute-step="mStep" show-meridian="ismeridian"></timepicker>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="row"></div>
<div class="form-group"></div>
<span class="form-group"></span>
<span class="form-group"></span>
<span class="form-group"></span>
<div class="form-group">
<label for="inputEndTime" class="col-sm-3 col-md-3 col-lg-2 control-label">End Time</label>
<div class="col-sm-9 col-md-6 col-lg-5">
<timepicker ng-model="event.endTime" hour-step="hStep" minute-step="mStep" show-meridian="ismeridian"></timepicker>
</div>
</div>
</div>
</div>
</form>
Comme vous pouvez le voir à la Fin du temps ne correspond pas avec l'heure de départ. Je ne suis pas sûr que la meilleure façon d'aborder cette question. Dois-je diviser chaque forme-groupe au lieu d'avoir deux colonnes?
mettre dans un jsFiddle.net avec le css merci
Oui, vous devez séparer chaque
difficiles à résoudre avec le peu d'info, mais je pense que un wrapper pourrait fonctionner ici. enveloppez l'ensemble du formulaire avec
Je l'ai eu à travailler avec la réponse ci-dessous.
Oui, vous devez séparer chaque
form-group si vous souhaitez aligner verticalement entrée sur la gauche et la droite. Chaque col classe a un les taille de sorte qu'il est facilement aligne 2 cols en 2 différentes lignes. Mais row n'a pas de hauteur, de sorte qu'il n'est pas possible (par défaut) à aligne ligne 2 dans 2 différents cols.difficiles à résoudre avec le peu d'info, mais je pense que un wrapper pourrait fonctionner ici. enveloppez l'ensemble du formulaire avec
position:relative;width:100%;height:auto; puis pour la fin du temps groupe position:absolute;bottom:0;right:0; peut-être?Je l'ai eu à travailler avec la réponse ci-dessous.
OriginalL'auteur willJk | 2014-05-08
Vous devez vous connecter pour publier un commentaire.
Bon, c'est pas si diffucult pour résoudre ce problème, ma solution serait de placer chaque forme-groupe dans des lignes distinctes et si vous voulez en ligne, vous pouvez les garder dans la même ligne. C'est quelque chose comme la table.
Maintenant, essayez ceci :
OriginalL'auteur Moeen MH