代码之家  ›  专栏  ›  技术社区  ›  Tom

使用bootsrap 4在屏幕上无法正确对齐列

bootstrap-4 css html
  •  1
  • Tom  · 技术社区  · 7 年前

    我正在使用bootstrap为angular 7应用程序实现一个UI。UI表单每行包含四个元素。左边有标签和输入控件,右边有类似的。所以我试着为标签设置col-md-2,为两个表单设置col-md-3。当我这样做的时候,右边有空格,假设这是因为总共有10列。如果将左侧和右侧的输入都增加1,即col-md-4,则最右侧的控件将接触边界。我需要左右两边的边距相等,左右两边的边距很小。

    我成功地创建了一个stackblitz来复制这个问题。也解决了正确的间距问题。您可以看到样式是在stackblitz上注释的。如何在控件之间创建间距,因为此时控件太乱了。我也想让它看起来叠在小屏幕上。请参阅下面更新的屏幕截图以供参考。其标记的更新输出

    这是截图

    带col-md-3

    enter image description here

    cold-md-4刚刚应用到第一排

    enter image description here 

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card">
  <div class="card-header panel-heading">
    <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
    <div class="pull-right" style="padding-right:10px;">
      <label 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 *ngIf="FundDetails" class="card-body" style="width:100%">

      <div class="form-group row">

        <label for="inputName" class="col-md-2  col-sm-11 col-form-label modal-label header">Name</label>
        <div class="col-md-4 col-sm-11 ">
          <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
          <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
        </div>

        <label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
        <div class="col-md-4 col-sm-11">
          <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
          <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
          </kendo-dropdownlist>
        </div>

      </div>

      <div class="form-group row">
        <label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
        <div class="col-md-3 col-sm-11">
          <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
          <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
        </div>


        <label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>

        <div class="col-md-3 col-sm-11">
          <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
          <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
          </kendo-dropdownlist>
        </div>

      </div>

      Updated html based on suggestion

      <div class="card">
        <div class="card-header panel-heading">
          <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
          <div class="pull-right" style="padding-right:10px;">
            <label 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 *ngIf="FundDetails" class="card-body" style="width:100%">

            <div class="form-row">

              <label for="inputName" class="col-md-2  col-form-label modal-label header">Name</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
                <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
              </div>

              <label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            <div class="form-row">
              <label for="inputTitle" class="col-md-2  col-form-label header">Make Anonymous</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
                <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
              </div>


              <label for="inputEmail" class="col-md-2  col-form-label header">Flagship</label>

              <div class="col-md-3 ">
                <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            <div class="form-row">

              <!-- <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{formatInceptionDate}}</div>
                        <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
                        </kendo-datepicker>
                    </div> -->

              <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
                <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
                </kendo-datepicker>
              </div>


              <label for="inputEmail" class="col-md-2  col-form-label header">Account Mandate</label>
              <div class="col-md-4 ">
                <div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>


            <div class="form-row">
              <label for="inputEmail" class="col-md-2  col-form-label header">Vehicle Type</label>
              <div class="col-md-4 ">
                <div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
                  valueField="ID">
                </kendo-dropdownlist>
              </div>



              <label for="inputEmail" class="col-md-2  col-form-label header">Bloomberg Ticker</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
                <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
              </div>

            </div>


            <div class="form-row">

              <label for="inputEmail" class="col-md-2  col-form-label header">Primary Class</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>



            </div>




            <div class="form-row">

              <div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
                <div class="desc-header">Details</div>
                <div class="divEditor">
                  <ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
                  </ckeditor>
                  <div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
                  </div>
                </div>
              </div>
            </div>





          </div>
          <div class="btn-toolbar" style="padding-top:40px;">
            <!-- <span> <button class="btn btn-default btn mr-3">
                        <i class="fa fa-file-pdf-o"></i>
                        View Fund Snapshot
                    </button>
                </span> -->

            <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="updateFund()">Save</button>
    
                </span>
            <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="cancelFund">Cancel</button>
                </span>
            <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
                        (click)="deleteFund()">Delete</button>
                </span>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header panel-heading">
          <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
          <div class="pull-right" style="padding-right:10px;">
            <label 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 *ngIf="FundDetails" class="card-body" style="width:100%">

            <div class="form-group row">

              <label for="inputName" class="col-md-2  col-sm-11 col-form-label modal-label header">Name</label>
              <div class="col-md-4 col-sm-11 ">
                <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
                <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
              </div>

              <label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
              <div class="col-md-4 col-sm-11">
                <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            <div class="form-group row">
              <label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
              <div class="col-md-3 col-sm-11">
                <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
                <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
              </div>


              <label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>

              <div class="col-md-3 col-sm-11">
                <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            Updated html based on suggestion

            <div class="card">
              <div class="card-header panel-heading">
                <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
                <div class="pull-right" style="padding-right:10px;">
                  <label 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 *ngIf="FundDetails" class="card-body" style="width:100%">

                  <div class="form-row">

                    <label for="inputName" class="col-md-2  col-form-label modal-label header">Name</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
                      <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
                    </div>

                    <label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>

                  </div>

                  <div class="form-row">
                    <label for="inputTitle" class="col-md-2  col-form-label header">Make Anonymous</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
                      <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
                    </div>


                    <label for="inputEmail" class="col-md-2  col-form-label header">Flagship</label>

                    <div class="col-md-3 ">
                      <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>

                  </div>

                  <div class="form-row">

                    <!-- <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{formatInceptionDate}}</div>
                        <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
                        </kendo-datepicker>
                    </div> -->

                    <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
                      <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
                      </kendo-datepicker>
                    </div>


                    <label for="inputEmail" class="col-md-2  col-form-label header">Account Mandate</label>
                    <div class="col-md-4 ">
                      <div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>

                  </div>


                  <div class="form-row">
                    <label for="inputEmail" class="col-md-2  col-form-label header">Vehicle Type</label>
                    <div class="col-md-4 ">
                      <div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
                        valueField="ID">
                      </kendo-dropdownlist>
                    </div>



                    <label for="inputEmail" class="col-md-2  col-form-label header">Bloomberg Ticker</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
                      <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
                    </div>

                  </div>


                  <div class="form-row">

                    <label for="inputEmail" class="col-md-2  col-form-label header">Primary Class</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>



                  </div>




                  <div class="form-row">

                    <div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
                      <div class="desc-header">Details</div>
                      <div class="divEditor">
                        <ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
                        </ckeditor>
                        <div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
                        </div>
                      </div>
                    </div>
                  </div>





                </div>
                <div class="btn-toolbar" style="padding-top:40px;">
                  <!-- <span> <button class="btn btn-default btn mr-3">
                        <i class="fa fa-file-pdf-o"></i>
                        View Fund Snapshot
                    </button>
                </span> -->

                  <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="updateFund()">Save</button>
    
                </span>
                  <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="cancelFund">Cancel</button>
                </span>
                  <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
                        (click)="deleteFund()">Delete</button>
                </span>
                </div>
              </div>
            </div>

    根据大屏幕上的建议更新输出

    enter image description here

    基于小屏幕建议的更新输出

    enter image description here

    0 回复  |  直到 7 年前
        1
  •  1
  •   zesak    7 年前

    只是删除或评论 标题 enter image description here

    另一方面,也有 <div *ngIf ="IsVehicleDependent"> 即使他们没有这个类 col-sm -... . 我正在学习ReactJS,在这些情况下 <React.Fragment> . 我找了一些类似的角度,我发现 <ng-container> . 我应用了它并改进了桌面视图。

    enter image description here

        2
  •  0
  •   zesak    7 年前

    如果不使用角度本身进行测试,并且不查看代码,我将更改 “表单组行” . 它也会消除 “第sm-11列” 结构应该更像这样: 

    <div class="card">
    <div class="card-header panel-heading">
        Fund Details
    </div>
    <div class="card-body">
        <div *ngIf="FundDetails">
            <div class="form-row">
                <label class="col-md-2 col-form-label">Label 1</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 1">
                </div>
                <label class="col-md-2 col-form-label">Label 2</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 2">
                </div>
            </div>
            <div class="form-row">
                <label class="col-md-2 col-form-label">Label 3</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 3">
                </div>
                <label class="col-md-2 col-form-label">Label 4</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 4">
                </div>
            </div>
        </div>
    </div>
</div>

    另一方面,两个DIV和“card body”类是否有必要?

        3
  •  0
  •   BugsArePeopleToo    7 年前

    您需要将响应的CSS规则添加到 .header 元素。我知道他们已经准备好了 width: 8%; 

    @media (max-width: 'YOUR_BREAKPOINT_WIDTH_HERE') {
  .header {
    width: 100%;
  }
}
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号