输入大小小于引导程序 4 中的“form-control-sm”，例如xs?

Question

是否有一个类可用于调整下拉菜单、输入字段等的大小，其大小小于 form-control-sm？我没有看到，所以需要自定义类？

我将 CDN 用于 bootstrap4 css，并希望对所有文本使用 0.75em 的默认字体大小，但引导输入以 0.875em 呈现。

有什么好的方法可以覆盖它并使它们匹配？

Answer 1

你必须走自定义方式

除了将字体大小从 .875em 减少到 .75em 之外，还可以减少其他内容；这将包括高度，也包括填充。

  .form-control-xs {
    height: calc(1em + .375rem + 2px) !important;
    padding: .125rem .25rem !important;
    font-size: .75rem !important;
    line-height: 1.5;
    border-radius: .2rem;
}

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Form Control Sizing</h2>
  <p>Change the size of the form control with .form-control-sm or .form-control-lg:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <input type="text" class="form-control form-control-xs" placeholder="Extra small form control" name="text0">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Default form control" name="text2">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3">
    </div>

  </form>
</div>