Как сделать кнопку переключателя bootstrap (флажок) фиксированной независимо от содержания?

Question

Поэтому я пытаюсь сделать так, чтобы моя bootstrap кнопка переключения (флажок) не двигалась во время перемещения контента, но я не смог предотвратить это, например:

как вы можете видеть на картинке, красные кружки - это кнопки, которые идеально вписываются в середину, после того, как я нажимаю на кнопку «больше информации», она поднимается и опускается вместо того, чтобы оставаться на том же месте / том же поле, что и сейчас.

есть пример того, что происходит после того, как я нажимаю на дополнительную информацию:

, поскольку вы можете видеть 2 красных круга, которые я сделал внизу: прежде чем я нажму «Подробнее» и 2 красных кружка вверху будут после щелчка.

bootstrap стиль флажка:

    /* CheckBox */

.switch {
    position: absolute;
    right: 8%;
    top: 4%;
    display: inline-block;
    width: 60px;
    height: 34px;

  }

  /* Hide default HTML checkbox */
  .switch input {

    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {

    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  .label.switch{
    margin-bottom: 150%!important;
  }
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

Мой html, который я добавил с JS:

 <div class="card col-md-4 col-12"> 
    <h5 class="card-header"> ${allCoins[i].symbol}    

      <label class="switch">
        <input class="checkBoxToggle" id='${allCoins[i].id}' name='${allCoins[i].name}' 
          type="checkbox" symbol='${allCoins[i].symbol}' 
             ${checkExistsInLocalStorage(allCoins[i].symbol)}>

        <span class="slider round"></span>
      </label> 
     </h5>

      <div class="card-body" cardBodySymbol='${allCoins.symbol}'>
        <h5 class="card-title"> Name: ${allCoins[i].name} </h5>

          <button class="moreInfoBtn btn btn-primary" type="button" data-toggle="${allCoins[i].id}" 
              data-target="#${allCoins[i].id}" aria-expanded="false" aria-controls="collapseExample">
              More info
           </button>

           <div class="collapse ${allCoins[i].id}">
             <div class="card card-body"></div>

           </div>
       </div>
   </div>`

Answer 1

Наконец, я получил исправление после того, как опубликовал его, для других людей, у которых есть проблемы с ним, также есть исправление:

    .switch {
    position: relative;
    left: 68%;
    padding-bottom: 0;
    display: inline-block;
    width: 60px;
    height: 34px;

  }

изменило положение с абсолютного на относительное и внесло изменения в левое положение как мой выбор.