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

debugcn 发表于 Dev

佐哈布阿里

我在两列中动态显示单选按钮。正如你在图片中看到的

它在少数情况下看起来不错，但有时当文本很大时它看起来很糟糕。我该如何解决这个问题

这是一些代码：

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

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

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

这是 html 代码（我使用的是 angular）

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

汤米

我创建了一个正在运行的 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;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。