Question

我想在右侧挑选要填充的字段（输入，选择，...）以填充较大的列标签，并在字段旁边粘贴警告标志（如图所示）。我尝试了很多配置，但没有任何作用。

非常亲切，非常感谢你。

这是我的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>

Answer 1

您应该使用.col-lg-2 .control-label进行操作（将其缩小以在一行中生成文字）并将max-width设置为form（将其设置为框并且不是全宽）以获得与图像中相同的结果。

以HTML5和HTML格式组织字段Bootstrap 3

1 个答案: