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

如果我让窗口变小，它看起来很好，因为文本行的宽度相等： https://gyazo.com/bd766c7cc824b0e02721a9475a0127af

第二张图是我如何想象列总是表现得像。为什么我在第一张图片上得到了这个奇怪的东西，我该如何修复呢？

非常感谢任何帮助！

Answer 1

由于label是内联元素，因此其宽度取决于子项长度。因此，当您在标签内粘贴class="row"时，row宽度将取决于文本长度。然后行内的网格单元会有所不同。接下来的错误是 - 你将class = row分配给span，它是内联元素和标签。 div更适合这种情况。

无论如何，有一个解决问题的技巧。至于标签将根据其内容出现，直到达到父宽度，为避免标签宽度的变化，您只需要将其固定在父容器中：

label {
  width: 100%;
}

您可以输入任意数量的％。

Bootstrap列操作不正确

1 个答案: