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来对齐它们

＆＃13;

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

＆＃13;

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将单选按钮放在行的右端？

2 个答案: