【问题标题】:Input size smaller than "form-control-sm" in bootstrap 4 e.g. xs?输入大小小于引导程序 4 中的“form-control-sm”,例如xs?
【发布时间】:2019-09-10 16:00:39
【问题描述】:

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

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

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

【问题讨论】:

标签: javascript html css twitter-bootstrap bootstrap-4


【解决方案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 生效并保持一致。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-20
  • 2014-07-28
  • 2017-09-30
  • 2017-12-16
  • 1970-01-01
  • 2016-07-22
  • 1970-01-01
相关资源
最近更新 更多