Я использую формы внутри элементов списка в начальной загрузке 4 и использую <a href class="stretched-link"> и небольшой обработчик событий внутри элементов управления моей формы, чтобы сделать весь <li> кликабельным, а не только маленькую метку и флажок. stretched-link увеличивает цель до ближайшего относительно позиционированного предмета.
К сожалению, по сравнению со стандартными элементами управления, более приятное custom-checkbox использует относительное позиционирование и разбивает stretched-link, так что целью щелчка является только текст метки.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
</li>
</ul>
Я могу отключить относительное позиционирование на пользовательском элементе управления, но это нарушает форматирование. Как мне заставить весь <li> контролировать флажок?