引導柱行爲不當

Question

我有一個angular2項目，我想創建一些使用列的單選按鈕。 （如果有其他方法，請建議）。我有以下代碼：

<div class="row"> 
       <div class="col-xl-7 col-lg-7 col-md-9 col-sm-12 col-xs-12" style="margin-top: 4px;"> 
        <label [ngClass]="{'custom-radio-error': (myForm.controls.group.pristine && submitted)}" class="radio-inline custom-radio"> 
        <input [(ngModel)]="data.group" type="radio" name="group" id="inlineRadio1" value="1" formControlName="group"> 
        <span class="row"> 
         <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1"> 
         1. 
         </div> 
         <div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11"> 
         Prescribed Ocaliva – patient has not yet started the medication at inclusion 
         </div> 
        </span> 
        </label> 
       </div> 
       <div class="col-xl-7 col-lg-7 col-md-9 col-sm-12 col-xs-12" style="margin-top: 8px;"> 
        <label [ngClass]="{'custom-radio-error': (myForm.controls.group.pristine && submitted)}" class="radio-inline custom-radio"> 
        <input [(ngModel)]="data.group" type="radio" name="group" id="inlineRadio2" value="2" formControlName="group"> 
        <span class="row"> 
         <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1"> 
         2. 
         </div> 
         <div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11"> 
         UDCA responders taking UDCA – (with ALP &le; 1,67 ULN) 
         </div> 
        </span> 
        </label> 
       </div> 
       <div class="col-xl-7 col-lg-7 col-md-9 col-sm-12 col-xs-12" style="margin-top: 8px;"> 
        <label [ngClass]="{'custom-radio-error': (myForm.controls.group.pristine && submitted)}" class="radio-inline custom-radio"> 
        <input [(ngModel)]="data.group" type="radio" name="group" id="inlineRadio2" value="3" formControlName="group"> 
        <span class="row"> 
         <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1"> 
         3. 
         </div> 
         <div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11"> 
         UDCA inadequate-responders on stable UDCA 10-15 mg/kg/day as standard of care, with the option to use other second-line treatments such as budesonide or fibrates - not treated with Ocaliva - (with ALP > 1,67 ULN) 
         </div> 
        </span> 
        </label> 
       </div> 
       </div> 
      </div> 

此代碼給我下面的輸出，這對於依賴於窗口大小各行不同列的大小： https://gyazo.com/f08bdaefd6e6e289c38c3143242319db

如果我讓窗口更小，它看起來罰款，因爲textlines有相同的寬度： https://gyazo.com/bd766c7cc824b0e02721a9475a0127af

第二張照片是我想象列總是表現得像。爲什麼我在圖片一上得到這個奇怪的東西，我該如何解決它？

任何幫助，非常感謝！

Answer 1

由於label是內嵌元素，其寬度取決於子級長度。因此，當您在標籤內粘貼class="row"時，row寬度將取決於文本長度。然後行內的網格單元格會有所不同。接下來的錯誤是 - 您將class = row分配給span，這是內聯元素以及標籤。 div適合這個要好得多。

無論如何，有一個技巧來解決問題。至於標籤將直到它到達父寬度取決於它的內容出現，以避免標籤寬度的變化，你只需要修復它的父容器內：

label { 
    width: 100%; 
} 

你可以把你想要的任何數量的百分比。