使用Bootstrap中的单选按钮更改标签字体大小时的对齐问题

debugcn 发表于 Dev

塞尔吉奥·维瓦斯·皮德

我正在使用自举程序单选按钮样式，单选按钮及其标签之间的对齐方式出现问题。

当我更改标签的字体大小时，会出现主要问题：单选按钮在原始位置停留在相同的大小（显然是因为我没有更改），而标签的更改大小将其自身移到下面（取决于字体大小；字体越大，移动时间越长。

在这里您可以看到对齐问题：

我还将代码留在这里：

<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>

亚历山大·贝鲁金（Aleksandr Belugin）

bootstrap label具有:before和:after与position: absolute和top: .25rem。这样可以固定无线电圈。我们可以用来计算它的位置top: calc(foo)。

我们知道，height无线电的圈子1rem，height的label是变化的，所以它是100％。要找到无线电圆的左上角坐标，我们取50％label 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。