如何使用引导程序 4 在行的右端放置单选按钮？答案

【问题标题】：How to place radio buttons at the right end of the row using bootstrap 4?如何使用引导程序 4 在行的右端放置单选按钮？
【发布时间】：2018-04-10 18:58:57
【问题描述】：

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

截图

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

【问题讨论】：

标签： html css flexbox twitter-bootstrap-4

【解决方案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>

【讨论】：

嗨，我试过你的。它创建了一个很大的空间，所以我的按钮会覆盖我行中的另一列，我不想要那么多空间
@Ben 你在说什么空间？...上面工作正常...你能分享截图...
对不起，我错过了表单组标签。现在它对我有用。非常感谢

【解决方案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>

【讨论】：

嗨，我试过你的。它的工作，但对于下一行和剩余的行，随着标签文本长度的变化，单选按钮的位置也会发生变化。无法将所有行放置在整齐的水平行中。我编辑我的答案并添加我想要的图片
如果我在 css 中使用.row 类，它会影响我的整个页面行吗？当我在整个页面中使用行类时
并且仅供参考，我正在使用引导程序 4。引导程序 3 中的某些组件不支持版本 4
是的，它会影响整个页面，而是使用另一个类来定义该 css ..查看编辑
我试过@Bhuwan 的回答。它为我工作。非常抱歉，非常感谢您的帮助