Bootstrap 复选框大小错误，正文字体较小答案

【问题标题】：Bootstrap checkbox size wrong with smaller body fontBootstrap 复选框大小错误，正文字体较小
【发布时间】：2017-06-07 23:27:57
【问题描述】：

我已将默认字体大小设置为基于 10px via 62.5%，然后将正文设置为 1.4rem。这似乎会导致自定义复选框控件出现问题，并且它们不再正确对齐。

我将 Bootstrap 4 的 SASS 文件与我自己的文件结合使用。变量文件中是否有我缺少的东西来解决这个问题？或者也许我需要做一些覆盖？我尝试过处理各种填充、边距、字体大小等，但它们的工作方式并不明显。

这是我为网站设置的默认字体大小：

html { 
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}

这里是 HTML

<div class="container-fluid">
  <div class="row align-items-end">
    <div class="col">
      <div class="form-group">
        <label for="worker">Worker</label>
        <select class="form-control" id="worker">
          <option>Jane Doe</option>
          <option>John Smith</option>
        </select>
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">Check this custom checkbox</span>
        </label>
      </div>
    </div>
  </div>
</div>

JSFiddle

总而言之，基本上我需要能够更改正文字体大小，但仍然让复选框仍然可以正常工作，并且当它们彼此相邻时与输入字段的高度相同。

【问题讨论】：

标签： css twitter-bootstrap checkbox

【解决方案1】：

您可以使父元素flex 并使用align-items 垂直居中。您还需要在复选框元素上使用非absolute 位置。无论页面的字体大小如何，这将使它们保持垂直居中。

html { 
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

.custom-control {
  display: flex;
  align-items: baseline;
}
.custom-control-indicator {
  position: static;
  margin: 0 .5rem 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row align-items-end">
    <div class="col">
      <div class="form-group">
        <label for="worker">Worker</label>
        <select class="form-control" id="worker">
          <option>Jane Doe</option>
          <option>John Smith</option>
        </select>
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">Check this custom checkbox</span>
        </label>
      </div>
    </div>
  </div>
</div>

您也可以使用top: 50%; transform: translateY(-50%); 将复选框垂直居中，然后将文本的line-height 设置为1，这样就不会影响垂直对齐。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html { 
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

.custom-control-indicator {
  top: 50%;
  transform: translateY(-50%);
}
.custom-control-description {
  line-height: 1;
}
</style>
<div class="container-fluid">
  <div class="row align-items-end">
    <div class="col">
      <div class="form-group">
        <label for="worker">Worker</label>
        <select class="form-control" id="worker">
          <option>Jane Doe</option>
          <option>John Smith</option>
        </select>
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">Check this custom checkbox</span>
        </label>
      </div>
    </div>
  </div>
</div>

【讨论】：

做到了！唯一的事情是我不得不使用“3rem”而不是“1”作为行高，但这可能是因为我还有一些其他的事情发生在选择框和输入字段上，即使字体大小也变大了更小。但出于这个精确问题的目的，这修复了它。

【解决方案2】：

一个简单的解决方案是更改复选框的样式：

.custom-control-indicator {
    height: 1.4rem;
    width: 1.4rem;
    top: calc(1.4rem * 0.25);
}

根据需要将 1.4rem 更改为与正文字体大小相同的大小（您也可以使用 SASS 变量将其设置为自动工作

【讨论】：