Bootstrap 4: плавающий пользовательский флажок справа от текста

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>