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

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

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

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

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

0
0
696
3

Ответы 3

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

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

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

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

Для разъяснения: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Я удалил часть позиция: относительная и добавил размер коробки: рамка-рамка, но все еще не работает.

Tasfia Sharmin 26.10.2018 07:51

Другие вопросы по теме