即使通过引导程序设置宽度后,控件也无法正确对齐

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (13)

我正在创建一个UI,每行包含四个控件。它将有一个标签和控件,然后是另一个标签和控件。如果你在我的标记中看到我为标签设置了col-md-2,为控件设置了col-md-4,但是第二个控件似乎换行并继续下一行。我不确定为什么这样做是因为它总共是宽度12.如果单击右上角的“编辑”按钮,则可以切换以查看控件

我还创建了一个stackblitz来复制这个问题

https://angular-lmck2c.stackblitz.io

标记

<style>
    label {
        margin-left: 0.5rem;
        vertical-align: middle
    }


    .panel-heading {
        color: black;
        /* background-color: #F5F7F7; */
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading .left-label {
        display: inline-block;
        padding-top: 5px !important;

    }
    .panel-heading label {
        margin-bottom: 0px !important;
    }
</style>



<div class="card" style="height: 100%; width: 100%;">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Terms</span>
        <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
            <label style="text-align: center; vertical-align:middle" class="btn btn-primary"
                [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input type="checkbox"
                    [(ngModel)]="EditMode" class="hidden" />Edit Mode</label>

        </div>
    </div>

    <div class="card-body">


            <div class="form-group row" style="width: 100%;">

                <label for="inputName" class="col-md-2  col-form-label modal-label">Name</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test Name</div>
                    <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm"
                        />
                </div>

                <label for="inputOffice" class="col-md-2 col-form-label ">Side Letter Agreement</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test</div>
                    <label *ngIf="EditMode" style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox" style="width: 13px; height: 13px;" />
                        Yes </label>

                </div>

            </div>

            <div class="form-group row">
                <label for="inputTitle" class="col-md-2  col-form-label ">Vehicle Type</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test Vehicle Type</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
                        [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                    </kendo-dropdownlist>
                </div>


                <label for="inputEmail" class="col-md-2  col-form-label ">Side Letter Details</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test</div>
                    <textarea *ngIf="EditMode" kendoTextArea></textarea>
                </div>
                <div class="col-md-4">

                </div>
            </div>


            <div class="form-group row">

                <label for="inputEmail" class="col-md-2  col-form-label ">Investment Manager (Firm)</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test</div>
                    <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm" />
                </div>

                <label for="inputTitle" class="col-md-2  col-form-label ">Plan Asset Fund</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test Asset Fund</div>
                    <label style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox" style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>

            </div>

            <div class="form-group row">

                <label for="inputEmail" class="col-md-2  col-form-label ">Investment Manager (Firm)</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test</div>
                    <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm" />
                </div>



            </div>


            <div class="form-group row">

                <label for="inputEmail" class="col-md-2  col-form-label ">NAV Reporting Cycle</label>
                <div class="col-md-4">
                    <div *ngIf="!EditMode">Test</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
                        [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                    </kendo-dropdownlist>
                </div>



            </div>


            <div class="form-group row">

                <label for="inputName" class="col-md-2  col-form-label ">Fund Currency</label>
                <div class="col-sm-4">
                    <div>Test</div>
                </div>



            </div>

            <div class="form-group row">

                <label for="inputName" class="col-md-2  col-form-label ">Audit Year End</label>
                <div class="col-sm-4">
                    <div>Test</div>
                </div>



            </div>





        <div class="btn-toolbar" style="padding-top:40px;">

            <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                    (click)="saveManager()">Save</button>

            </span>


        </div>
    </div>
</div>
提问于
用户回答回答于

我认为答案是因为你的标签有左边距。如果你把它拿出来,元素应该都适合一行。

通常,当项目不适合Bootstrap行时,我的第一个检查是始终查看是否有额外的边距或填充不应该在某处。

如果在标签之前确实需要额外的间距,请尝试将它们包装在包含div中,然后在该包装上添加.col- *类。然后,您可以尝试在标签上添加额外的间距。

<div class="col-md-4"> <label></label> </div>

扫码关注云+社区

领取腾讯云代金券