文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >即使在通过bootstrap设置宽度后也无法正确对齐的控件

问即使在通过bootstrap设置宽度后也无法正确对齐的控件
EN

Stack Overflow用户
提问于 2019-05-31 23:55:33
回答 2查看 111关注 0票数 1

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

我还创建了一个堆栈闪电战来复制这个问题

https://angular-lmck2c.stackblitz.io

标记

代码语言：javascript
复制
<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>
html
css
bootstrap-4
EN

回答 2

Stack Overflow用户

发布于 2019-06-01 00:15:41

我认为答案是因为你的标签有一个空白处-左。如果去掉它，所有元素都应该放在一行上。

通常，当项目不适合Bootstrap行时，我的第一个检查总是检查是否有额外的边距或填充不应该存在的地方。

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

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

票数 0
EN

Stack Overflow用户

发布于 2019-06-05 20:29:03

我整理了一下你的代码，看看这是否适合你。

代码语言：javascript
复制
.panel-heading {
  color: black;
  /* background-color: #F5F7F7; */
  border-color: #ddd;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
}

.panel-heading .left-label {
  display: inline-block;
  padding-top: 5px;
  font-size: 18px;
  font-weight: bold;
}

.panel-heading label {
  margin-bottom: 0;
}
代码语言：javascript
复制
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card w-100">
  <div class="card-header panel-heading">
    <span class="left-label">Fund Terms</span>
    <div class="float-right">
      <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">
      <label for="inputName" class="col-md-2 col-form-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>
        <div *ngif="EditMode" class="form-check">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label">Yes</label>
        </div>
      </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" 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="" class="form-control form-control-sm"></textarea>
      </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>
        <div *ngif="EditMode" class="form-check">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label">Yes</label>
        </div>
      </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" 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>

​

如果仍要在标签上设置左边距，则可以在包含的div中对label进行换行

代码语言：javascript
复制
.col-form-label {
    margin-left: 0.5rem;
}
代码语言：javascript
复制
<div class="form-group row">
    <div class="col-md-2">
      <label for="inputName" class="col-form-label">Name</label>
    </div>
    <div class="col-md-4">
        ...

或将标签文本换行到span中

代码语言：javascript
复制
.col-form-label span {
    display: inline-block;
    margin-left: 0.5rem;
}
代码语言：javascript
复制
<div class="form-group row">
    <label for="inputName" class="col-md-2 col-form-label"><span>Name</span></label>
    <div class="col-md-4">
        ...
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56398291

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档