Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="card attribute filter-panel" data-type="select" data-id="1">
  <div class="card-header">
    <i class="fa fa-angle-down   pull-right"></i>
    <span class="card-title">color</span>
  </div>
  <div class="card-body" style="padding: 0px; padding-top: 15px">
    <ul class="filter-ul">
      <li>
        <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
          <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1">
          <label class="custom-control-label " for="customCheck1">red</label>
        </div>
      </li>
      <li>
        <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
          <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2">
          <label class="custom-control-label " for="customCheck2">blue</label>
        </div>
      </li>
      <li>
        <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
          <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3">
          <label class="custom-control-label " for="customCheck3">green</label>
        </div>
      </li>
    </ul>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

当前位置

我希望checkboxes浮动到文本的右侧，我尝试过float:right显然没有用。

我怎样才能将它们向右浮动？

Answer 1

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="card attribute filter-panel" data-type="select" data-id="1">
   <div class="card-header">
      <i class="fa fa-angle-down   pull-right"></i>
      <span class="card-title">color</span>
   </div>
   <div class="card-body" style="padding: 0px; padding-top: 15px">
      <ul class="filter-ul">
         <li>
            <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">

               <label class="custom-control-label " for="customCheck1">red</label>
                 <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1" style="float:right">
            </div>
         </li>
         <li>
            <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">

               <label class="custom-control-label " for="customCheck2">blue</label>
               <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2"style="float:right">
            </div>
         </li>
         <li>
            <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">

               <label class="custom-control-label " for="customCheck3">green</label>
                 <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3"style="float:right">
            </div>
         </li>
      </ul>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

检查此代码。我将复选框设置在文本的右侧。我想这就是您的问题。希望这对您有所帮助：）

Answer 2

我使用postition: absolute将您的框移到右侧，将内容移到左侧，希望这种方法效果很好。

您可以使用right CSS属性来获得所需的准确结果。

.custom-control-label::before ,.custom-control-label::after {
    right: 0;
}

label span {
    position: absolute;
    right: 21px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="card attribute filter-panel" data-type="select" data-id="1">
       <div class="card-header">
          <i class="fa fa-angle-down   pull-right"></i>
          <span class="card-title">color</span>
       </div>
       <div class="card-body" style="padding: 0px; padding-top: 15px">
          <ul class="filter-ul">
             <li>
                <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
                   <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1">
                   <label class="custom-control-label " for="customCheck1"><span>red</span></label>
                </div>
             </li>
             <li>
                <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
                   <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2">
                   <label class="custom-control-label " for="customCheck2"><span>blue</span></label>
                </div>
             </li>
             <li>
                <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
                   <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3">
                   <label class="custom-control-label " for="customCheck3"><span>green</span></label>
                </div>
             </li>
          </ul>
       </div>
    </div>

Bootstrap 4：浮动自定义复选框（位于文本右侧）

2 个答案: