переключатель bootstrap 4 не соответствует отступу

У меня проблема, когда настраиваемые переключатели Bootstrap 4 не соответствуют моему левому отступу.

Увидеть ниже:

введите описание изображения здесь

Вот мой код для печати элемента

<div class="p-4">
  <ul class="d-flex flex-column justify-content-between">
    <!-- Option One -->
    <li class="w-100 side">
      <div class="d-flex pl-0 custom-control custom-radio align-content-start">
        <div class="pt-3 pb-3 mr-2">
          <input id="option-1" type="radio" class="position-relative custom-control-input">
             <label for="option-1" class="custom-control-label">
             <span>Option One</span>
          </label>
        </div>
      </div>
    </li>

И код к полному примеру:

https://codepen.io/Edon123/pen/LYPNbVv?editors=1100

Как я могу заставить мой элемент ввода начальной загрузки выровняться с заполнением?

edit: По сути, моя проблема в том, что на переключатели не влияет заполнение, как показано на изображении. Я хочу, чтобы переключатели нажимались прокладкой.


html css radio-button bootstrap-4
person Edon    schedule 15.08.2019    source источник
comment
обе ваши радиокнопки доступны в <div class="p-4">. Поэтому используйте что-то вроде этого. <div class="p-4 ml-4">, который войдет во все `‹div›. Вы этого ожидаете? Или дайте нам знать   -  person Nipun Tharuksha    schedule 15.08.2019
comment
не совсем, но спасибо @NipunTharuksha, обновлю вопрос   -  person Edon    schedule 15.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку .custom-control-label::before относится к вашему пользовательскому радио, имеет position: absolute;, поэтому заполнение с ним не работает.

.custom-control-label::before {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

Вы можете заставить его работать, удалив position: absolute; и:

Вариант 1: измените его display на inline-block.

Вариант 2. Добавьте приведенный ниже CSS в .custom-control-label:

display: flex;
align-items: center;

Codepen

Надеюсь, это поможет.

person Cuong Le Ngoc    schedule 15.08.2019
comment
спасибо за ответ, я пробовал это в коде, но он все еще не соответствует правильному - person Edon; 15.08.2019
comment
та же проблема, что и в исходном сообщении, вот что я пробовал codepen.io/Edon123/ pen / bGbpBzL? editors = 1100 - person Edon; 15.08.2019
comment
Я скопировал не ту часть. Это должно быть display: flex вместо position: relative. - person Cuong Le Ngoc; 15.08.2019
comment
И нужно убрать position: absolute в .custom-control-label::before. Я добавил код, проверьте пожалуйста. - person Cuong Le Ngoc; 15.08.2019