单击时，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

在我看来，它并没有移动，只是边界变大了，从视觉上看，它似乎已经移动了。我想您可以通过在此CSS行-box-sizing: border-box;

中将类型为checkbox的输入添加到CSS中来解决您的问题

Answer 2

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

Answer 3

首先，如果您在子元素中不使用任何顶部/底部/左侧/右侧或position: relative，则不需要position。 我认为问题是由于您自定义的添加CSS。

尝试使用 box-sizing: border-box; ，即使您使用其他填充或边框，也会强制将元素设置为原始大小。

为澄清起见：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing