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

Posted 2023-03-06

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

【英文标题】：Input size smaller than "form-control-sm" in bootstrap 4 e.g. xs?

【发布时间】：2019-09-10 16:00:39

【问题描述】：

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

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

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

【问题讨论】：

你可以通过覆盖css来改变它

这能回答你的问题吗？ Bootstrap 3 & Boostrap 4 - input-xs (smaller than sm)

【参考方案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>

【讨论】：

这有所帮助，但最后，我也遇到了文本输入响应与选择输入不同的问题。原来我还在使用 BS 4.0，升级到 BS 4.3.x 后，这些问题就消失了，我的 form-control-sm 自定义 css 生效并保持一致。