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

Question

是否有一个类可用于对下拉菜单，输入字段等进行大小小于form-control-sm的类？我看不到任何东西，因此需要自定义类吗？

我正在将cdn用于bootstrap4 css，并想对所有文本使用默认字体大小.75em，但是bootstrap输入正以.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>