Bootstrap 2格布局对齐问题

时间:2019-10-18 11:16:14

标签: html css

我想根据条件 displayInSecondColumn == true 在页面上以2列形式显示输入类型,如果 displayInSecondColumn == true 然后显示该字段在第二列中,否则使用引导框架在第一列中显示。我已根据其条件以2列的形式成功渲染了这些字段,但是这些字段未正确对齐。

下面是HTML代码段:

<div ng-show="supportModel.srData.SRColumnLayoutForSS3 == 2" ng-repeat="header in supportModel.srData.headers | orderObjectBy: 'Order'">            
            <div class="row" ng-repeat="question in header | orderObjectBy: 'Order'" ng-show="question.headerId != 'tempRootHeaderId' && question.Type == 'header section'">
                <div class="srd-question" data-id="{{question.id}}" data-answer="{{question.Value}}" ng-switch="question.Type"  data-visibility="{{question.isVisible}}">
                    <ng-form name="subFormInputs">
                        <srd-header-section ng-switch-when="header section" data="question"></srd-header-section>
                    </ng-form>
                </div>  
            </div>
            <div class="row">               
                    <div class="col-md-6 modalLayoutWidth">
                    <div ng-repeat="question in header | orderObjectBy: 'Order'" data-id="{{question.id}}" data-answer="{{question.Value}}" data-visibility="{{question.isVisible}}" ng-switch="question.Type" ng-if="!question.DisplayInSecondColumn && question.Type != 'header section'">

                                <div ng-include="supportModel.srData.resourceUrl+'views/support/SRInputFields.html'"></div>                                 
                            </div>              

                        </div>  
                        <div class="col-md-6 modalLayoutWidth floatLeftRtl" style="float: right;">
                <div ng-repeat="question in header | orderObjectBy: 'Order'" data-id="{{question.id}}" data-answer="{{question.Value}}" data-visibility="{{question.isVisible}}" ng-switch="question.Type" ng-if="question.DisplayInSecondColumn && question.Type != 'header section'">                             


                        <div ng-include="supportModel.srData.resourceUrl+'views/support/SRInputFields.html'"></div>         
                    </div>
                </div>
            </div>

下面是SRInputFields.html文件

<ng-form name="subFormInputs" >
        <div ng-switch="question.Type" ng-if="question.IsHidden == false">
                    <srd-text-question ng-switch-when="textfield" data="question"></srd-text-question>
                    <srd-text-question ng-switch-when="textarea" data="question"></srd-text-question>
                    <srd-radio-question ng-switch-when="radiobutton" data="question"></srd-radio-question>
                    <srd-checkbox-question ng-switch-when="checkbox" data="question"></srd-checkbox-question>
                    <srd-number-question ng-switch-when="number" data="question"></srd-number-question>
                    <srd-menu-question ng-switch-when="picklist" data="question"></srd-menu-question>
                    <srd-date-time-question ng-switch-when="date/time" data="question"></srd-date-time-question>
                    <srd-date-question ng-switch-when="date" data="question"></srd-date-question>
                    <srd-reference-question-tree ng-switch-when="lookup" data="question" for-sr="true" ng-if="question.isCategory"></srd-reference-question-tree>
                    <srd-reference-question ng-switch-when="lookup" data="question" ng-if="!(question.isCategory)"></srd-reference-question>
                    <srd-header-section ng-switch-when="header section" ng-if="supportModel.srData.SRColumnLayoutForSS3 != 2" data="question"></srd-header-section> 
                    <srd-text-question ng-switch-when="richtextarea" data="question"></srd-text-question> 
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && (subFormInputs.formField.$error.required || subFormInputs.radioButtonForm.formField.$error.required)">{{selfServiceLabels.EnterValue}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.MinSel">{{selfServiceLabels.InvalidSelection}}({{selfServiceLabels.MinimumSelections}} {{question.Validations.MinValue}})</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.email">{{selfServiceLabels.InvalidEmail}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && ( formSubmitted && (subFormInputs.formField.$error.positiveValue || subFormInputs.formField.$error.number || subFormInputs.formField.$error.badInput))">{{selfServiceLabels.InvalidNumber}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.url">{{selfServiceLabels.InvalidURL}}</span>             
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.min">{{selfServiceLabels.range}}({{selfServiceLabels.MinimumValue}} {{question.Validations.MinValueLocalized}})</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.max">{{selfServiceLabels.range}}({{selfServiceLabels.MaximumValue}} {{question.Validations.MaxValueLocalized}})</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.minmax">{{selfServiceLabels.range}} ({{selfServiceLabels.ExpectedRange}}{{question.Validations.MinValueLocalized}}-{{question.Validations.MaxValueLocalized}})</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.minlength && !question.Validations.MaxValue">{{selfServiceLabels.InvalidLength}} ({{selfServiceLabels.MinimumLength}} {{question.Validations.MinValue}})</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date' && subFormInputs.formField.$error.ValidDate">{{selfServiceLabels.InvalidDate}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date/time' && subFormInputs.formField.$error.ValidDate">{{selfServiceLabels.InvalidDate}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date' && subFormInputs.formField.$error.smaller">{{selfServiceLabels.Expected}}{{question.Text}} < {{question.errorMsg}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date' && subFormInputs.formField.$error.greater">{{selfServiceLabels.Expected}}{{question.Text}} > {{question.errorMsg}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date/time' && subFormInputs.formField.$error.smaller">{{selfServiceLabels.Expected}}{{question.Text}} < {{question.errorMsg}}</span>
                    <span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date/time' && subFormInputs.formField.$error.greater">{{selfServiceLabels.Expected}}{{question.Text}} > {{question.errorMsg}}</span>
                </div>
            </ng-form>      

In this image check "isValid" is aligned with "New RTF" which is correct but "Vendors" should be aligned with "Description" which is not getting aligned.

任何帮助将不胜感激。

谢谢!

0 个答案:

没有答案