html - Bootstrap 4 单选按钮不符合填充

Question

我遇到了一个问题，即 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>

以及完整示例的codepen:

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

如何让我的 Bootstrap 输入元素与填充对齐？

编辑:基本上我的问题是单选按钮不受填充的影响，如图所示。我希望单选按钮由填充插入。

Answer 1

因为 .custom-control-label::before 引用您的自定义 radio 有 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

希望对您有所帮助。