html - 在 Bootstrap 中使用单选按钮更改标签字体大小时出现对齐问题

Question

我正在使用引导单选按钮样式，但单选按钮与其标签之间的对齐有问题。

当我更改标签的字体大小时，主要问题出现了:单选按钮在原始位置保持相同的大小(显然，因为我没有更改它)，并且标签更改其大小并移动到下方(取决于字体大小；尺寸越大，移动时间越长)。

在这里你可以看到对齐问题:



我也把我的代码留给你:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form name="ejercicio_p1_form" method="POST" action="/response_p1_exercise">
  <div class="container">
    <div class="row">
      <div class="col-2"></div>
      <div class="col-3">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_1" value="1" onclick="submit_form_p1_exercise()">
            <label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_1"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-2">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_2" value="2" onclick="submit_form_p1_exercise()">
            <label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_2"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 1

bootstrap label有 :before和 :after与 position: absolute和 top: .25rem .这使得 radio 圈被固定。我们可以用 top: calc(foo) 计算它的位置.

我们知道，height广播圈是1rem , height的 label正在改变，所以它是 100%。为了找到 radio 圆的左上 Angular 坐标，我们取 label 的 50% height , 圆的一半应该在中心之上，一半在下，所以减去 0.5rem。

我们的公式是:top: calc((100% - 1rem)/2)
在片段中查看它的外观。

.label-style {
  white-space: nowrap;
}

.label-style:before, .label-style:after {
  top: calc((100% - 1rem)/2) !important;
}

.font-size30 {
  font-size: 30px;
}

.font-size50 {
  font-size: 50px;
}

.font-size62 {
  font-size: 62px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="ejercicio_p1_form" method="POST" action="/response_p1_exercise">
  <div class="container p-4">
    <div class="row">
      <div class="col-6">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_1" value="1" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size30" for="p1_ejer_1"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_2" value="2" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size30" for="p1_ejer_2"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-6">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_3" value="1" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size50" for="p1_ejer_3"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_4" value="2" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size50" for="p1_ejer_4"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-6">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_5" value="1" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size62" for="p1_ejer_5"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_6" value="2" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size62" for="p1_ejer_6"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>