html - 如何使用 bootstrap 4将单选按钮放置在该行的右端？

现在，我尝试使用.pull-right和.float-right类将单选按钮放在右端。它不起作用。编码和图片如下。

<div class="row ">
  <div class="form-group col-lg-6">
    <div class="row">
      <label class="Bold">Is Valid</label>
      <input class="radio-inline float-right" type="radio">Yes
      <input class="radio-inline float-right"  type="radio" >No
    </div>
  </div>
  <div class="form-group col-lg-6">
    <div class="row">
      <label class="Bold">Is Checked</label>
      <input class="radio-inline float-right" type="radio">Yes
      <input class="radio-inline float-right"  type="radio" >No
    </div>
   </div>
</div>

屏幕截图



我想要下面的图片（只是一个示例）

最佳答案

您将需要将单选按钮包装到div .form-group并使用[bootstrap4 flex utilities]类d-flex justify-content-between来对齐它们

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row ">
    <div class="form-group col-lg-6">
      <div class="d-flex justify-content-between">
        <label class="Bold">Is Valid</label>
        <div class="form-group">
          <input class="radio-inline" type="radio">Yes
          <input class="radio-inline" type="radio">No
        </div>
      </div>
    </div>
    <div class="form-group col-lg-6">
      <div class="d-flex justify-content-between">
        <label class="Bold">Is Checked</label>
        <div class="form-group">
          <input class="radio-inline" type="radio">Yes
          <input class="radio-inline" type="radio">No
        </div>
      </div>
    </div>
  </div>
</div>

关于html - 如何使用 bootstrap 4将单选按钮放置在该行的右端？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49749639/