單擊時，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

在我看來，它並沒有移動，只是只是變得更大的邊框而在外觀上看起來像是在移動。 我想您可以通過將類型為checkbox的css行添加到css中來解決您的問題-box box-sizing: border-box;

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