css - Bootstrap 复选框大小错误，正文字体较小

Question

我已将默认字体大小设置为基于 10px via 62.5%，然后将 body 设置为 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

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

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