以 HTML5 和 Bootstrap 3 的形式组织字段答案

【问题标题】：Organisation of fields in a form HTML5 & Bootstrap 3以 HTML5 和 Bootstrap 3 的形式组织字段
【发布时间】：2017-06-05 00:39:16
【问题描述】：

我想整理右侧要填写的字段（输入、选择、...），以便为更大的列标签留出位置，并将警告标志粘贴到字段旁边（如图所示） .我尝试了很多配置，但没有任何效果。

非常诚挚，非常感谢您。

Image

这是我的 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><b>Données de la revue</b></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>
            <i class="glyphicon glyphicon-warning-sign form-control-feedback" ng-class="{ 'has-warning': !supportDemandeForm.selectTypeFacturation.$touched }" ng-if="!supportDemandeForm.selectTypeFacturation.$touched"></i>
        </div>
    </div>

    </fieldset>

</form>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您应该使用.control-label 的.col-lg-2 进行操作（使其变大以使文本在一行中）并将max-width 设置为form（使其装箱而不是全宽 ) 以获得与图像中相同的结果。

【讨论】：