Angular & 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

.form-check-label {
    width: 80px;
    max-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

---

或者，響應式方法是使用網格列和標簽的text-truncate類。 不需要額外的 CSS ：

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

<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>