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

Question

现在我尝试类 .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>

截图

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

Answer 1

您需要将单选按钮包装成 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>

Answer 2

您需要包含 bootstrap.min.css 并将单选按钮包裹在 <span> 中并给它 float:right

.radio-group{
float:right;
}
.formrow {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row formrow">
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Valid</label> 
<span class="radio-group">
  <input class="radio-inline float-right" type="radio">Yes 
  <input class="radio-inline float-right"  type="radio" >No
</span>
 </div>
</div>
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Checked</label> 
<span class="radio-group">
  <input class="radio-inline float-right" type="radio">Yes 
  <input class="radio-inline float-right"  type="radio" >No
</span>
 </div>
 </div>                                                                                                                
 </div>

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

How to place radio buttons at the right end of the row using bootstrap 4?

html

css

flexbox

twitter-bootstrap-4