Saad Hamani Ответов: 0

Организация полей в форме HTML5 & amp; bootstrap 3

Я хочу отсортировать поля, которые должны быть заполнены (входы, выбор, ...) справа, чтобы освободить место для больших меток столбцов, и вставить предупреждающие знаки рядом с полями (как описано на рисунке). Я перепробовал довольно много конфигураций, но ничего не работает.

Очень сердечно и заранее Вам большое спасибо.

Изображение

Вот моя страница cshtml :
<div ng-app="SupportDemandeApp" ng-controller="SupportDemandeCtrl">
    <form class="form-horizontal" id="supportDemandeForm" name="supportDemandeForm" method="post" ng-submit="validationSupportDemande(supportDemandeForm.$valid)" novalidate>
	<fieldset>
		<legend>Données de la revue</legend>

		<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.inputMontantGlobalAffaire.$touched && supportDemandeForm.inputMontantGlobalAffaire.$invalid }">
			<label for="inputMontantGlobalAffaire" class="col-lg-2 control-label">Montant global prévu de l'affaire (en K€)<span style="color:red"> *</span></label>
			<div class="col-lg-10">
				<input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" ng-change="montantAnnuel()" pattern="[0-9]+(\\.[0-9][0-9]?)?" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Build + RUN + Infrastructure" required>
				<div class="help-block" ng-messages="supportDemandeForm.inputMontantGlobalAffaire.$error" ng-if="supportDemandeForm.inputMontantGlobalAffaire.$touched"><div ng-message="required">Champ requis</div></div>
			</div>
		</div>
		
		<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.selectTypeContrat.$touched && supportDemandeForm.selectTypeContrat.$invalid }">
			<label for="selectTypeContrat" class="col-lg-2 control-label">Type de contrat (IS/OS)<span style="color:red"> *</span></label>
			<div class="col-lg-10">
				<select class="form-control" id="selectTypeContrat" name="selectTypeContrat" ng-model="selectedTypeContrat.type" ng-init="typeContrat()" ng-change="montantAnnuel()" ng-options="type for type in types" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Voir définitions dans l'onglet Type de contrat" required></select>
				<div class="help-block" ng-messages="supportDemandeForm.selectTypeContrat.$error" ng-if="supportDemandeForm.selectTypeContrat.$touched"><div ng-message="required">Champ requis</div></div>
			</div>
		</div>
				
				
		<div class="form-group has-warning has-feedback" ng-class="{ 'has-warning': !supportDemandeForm.selectTypeFacturation.$touched }">
			<label for="selectTypeFacturation" class="col-lg-2 control-label">Type de facturation</label>
			<div class="col-lg-10">
				<select class="form-control" id="selectTypeFacturation" name="selectTypeFacturation" ng-model="selectTypeFacturation">
					<option></option>
					<option>Régie</option>
					<option>Forfait</option>
					<option>Régie & Forfait</option>
				</select>
				
			</div>
		</div>

		</fieldset>
			
	</form>
</div>


Что я уже пробовал:

Я перепробовал довольно много конфигураций, но ничего не работает.

0 Ответов