Question

我已将默认字体大小设置为基于10px通过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

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

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>

Answer 2

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

transform.RotateAround

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

较小的正文字体引导复选框大小错误

2 个答案: