Переключатель Bootstrap 4 перемещается влево при нажатии

Question

Я добавил радиокнопку в таблицу с помощью начальной загрузки 4. Всякий раз, когда я нажимаю на любую из радиокнопок, она немного сдвигается влево.Я добавил GIF ниже

Код одной строки из таблицы приведен ниже.

<table>
<tr class="" data-id='1'>
    <td>1</td>
    <td>Md. Khairul Basar</td>
    <td class="form-inline table_attendance">
         <div class="form-check form-check-radio">
         <label class="form-check-label">
         <input class="form-check-input" type="radio" name="exampleRadio" style=" position: relative;"id="exampleRadios1" value="present">
          <span class="form-check-sign"></span>
                Present
           </label>
          </div>
          <div class="form-check form-check-radio">
          <label class="form-check-label">
          <input class="form-check-input pull-right" type="radio" 
name="exampleRadio" style=" position: relative;"id="exampleRadios2" 
value="absent">
         <span class="form-check-sign"></span> 
                 Absent
         </label>
       </div>
      </td>
     </tr>
   <table>

Если вы могли бы помочь мне с кодомтогда было бы здорово.

Answer 1

   $('input[type="radio"]').css("box-sizing","border-box");

Answer 2

Сначала вам не нужно position: relative, если вы не используете top / bottom / left / right или position в дочернем элементе. Я полагаю, проблема связана с вашим пользовательским добавлением CSS.

Попробуйте использовать box-sizing: border-box; Это приведет к тому, что элемент будет иметь оригинальный размер, даже если вы используете дополнительные отступы или рамку.

Для уточнения: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 3

Мне кажется, что он не двигается, он просто получает большую границу и визуально выглядит так, как будто он двигался.Я думаю, что вы могли бы решить вашу проблему, добавив к вашему CSS для ввода с флажком типа эту строку CSS - box-sizing: border-box;