Angular＆amp; Bootstrap4：如何垂直对齐带有可变长度标签的多个单选按钮？

Question

我尝试列出具有可变长度标签的单选按钮，如下所示。
问题是由于每个标签的长度不同，单选按钮不会垂直对齐。
如何使它们正确对齐？

<div class="row">
 <div class="form-check form-check-inline" *ngFor="let t of accountTitles; let index = index; let first = first; let last = last;">
  <input class="form-check-input" type="radio" name="accountTitle" id="accountTitle_{{t.accountTitleId}}" value="t.accountTitleId" [checked]="t.accountTitleId == accountTitleId">
  <label class="form-check-label"  [ngClass]="{'has-subsidiary' : t.subsidiaryAccountTitles.length > 0}" for="accountTitle_{{t.accountTitleId}}">{{t.accountTitleName}}</label>
 </div>
</div>

Answer 1

您可以在标签上设置固定宽度，然后任何溢出文本将使用省略号截断（...）

https://www.codeply.com/go/I8sCvM6oCT

text-truncate

或者，响应式方法是使用网格列，并使用<div class="row"> <div class="form-check form-check-inline col-3"> <input class="form-check-input" type="radio" name="accountTitle"> <label class="form-check-label text-truncate">some label</label> </div> <div class="form-check form-check-inline col-3"> <input class="form-check-input" type="radio" name="accountTitle"> <label class="form-check-label text-truncate">aaa</label> </div> (... more form-check) </div> 类作为标签。 无需额外的CSS ：

https://www.codeply.com/go/Lmby8RaHab

    container {
        margin-left: auto;
        margin-right: auto;
        /*padding-left: 15px;
        padding-right: 15px;*/
    }

    .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        background-color: powderblue;
    }

    .col-lg-right-4 {
        grid-column: col-start 9 / span 4
    }

    .col-lg-left-6 {
        grid-column: col-start / span 6;
        grid-row: 1;
    }

    .col-md-right-4 {
        grid-column: col-start 9 / span 4
    }

    .col-md-left-6 {
        grid-column: col-start / span 6;
        grid-row: 1;
    }

    .col-xs-12 {
        grid-column: span 12;
    }