Question

我在两栏中动态显示单选按钮。如您所见

在少数情况下看起来不错，但有时当文本较大时，它看上去会消失。我该如何解决这个问题

以下是一些代码：

.radiobox-padding-top{
    padding-top:15px;
}

input[type=radio] {
  float: left;
  display: block;
  margin-top: 4px;
}

label {
  margin-left: 15px;
  display: block;
}

这是html代码（我使用的是角度代码）

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">

  <div class="col-12" >
    <p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
  </div>

  <div class="row" style="margin: 0px">
    <div class="col-12 radiobox-padding-top">
      <div class="form-group">

        <span *ngFor="let entry of options; index as i">

          <div class="col-5 inlineBlock">
            <div class="radio">

              <input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
              <label>
                {{options[i]}}
              </label>
            </div>
          </div>

        </span>

      </div>
    </div>
  </div>
</div>

Answer 1

我创建了一个running stackblitz。

像这样修改您的代码：

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">

  <div class="col-12" >
    <p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
  </div>

  <div class="row" style="margin: 0px">
    <div class="col-12 radiobox-padding-top">
      <div class="form-group">
        <div class="row">    
          <div class="col-6" *ngFor="let entry of options; index as i">    
            <div class="inlineBlock">
              <div class="radio">
                <input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
                <label>
                  {{options[i]}}
                </label>
              </div>
            </div>
          </div>    
        </div>
      </div>
    </div>
  </div>
</div>

另外像这样更改CSS：

.radiobox-padding-top{
  padding-top:15px;
}

input[type=radio] {
  float: left;
  margin-top: 4px;
}

label {
  padding-left: 5px;
  margin-left: 15px;
  display: block;
}

有关引导程序断点的更多信息，请查看here。

如何在两列中显示多个单选按钮

1 个答案: