Html 引导4单选按钮不符合填充要求

我有一个问题，引导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>

选择一

和完整示例的代码笔：

如何使引导输入元素与填充对齐

---

编辑：本质上我的问题是单选按钮不受填充的影响，如图所示。我希望单选按钮由填充物推动。

因为

.custom control label:：before

参考您的自定义收音机的位置为

绝对因此填充不适用于它

.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;
}

您可以通过删除它的
位置：绝对和：

选项1：将其
显示
更改为
内联块

选项2：将以下css添加到
。自定义控件标签
：

display: flex;
align-items: center;


希望有帮助。
您的两个单选按钮都可以在
下找到。所以请使用类似的方法<代码>
这将成为整个`。这就是你所期望的吗。或者请让我们知道不太清楚，但谢谢@NipunTharuksha，我会更新问题谢谢你的回答，我在codepen中尝试过，但似乎仍然不符合我在原始帖子中看到的相同问题，以下是我尝试的内容我复制了错误的部分。它应该是
display:flex
，而不是
position:relative
。您需要删除
中的
位置：绝对
。自定义控件标签：：before
。我加了密码笔，请检查。