bootstrap 表单控件类有什么用？

Question

我在思考如何使用form-controlBootstrap 提供的类的策略时遇到了麻烦。

一方面，我从 Bootstrap 文档中得到了这个相当平淡的评论：

文本表单控件（如输入、选择和文本区域）使用 .form-control 类设置样式。包括用于一般外观、焦点状态、大小等的样式。

参考：https : //getbootstrap.com/docs/4.0/components/forms/#form-controls

而另一方面，我有相当杂草的代码要查看：

.form-control {
  display: block;
  width: 100%;
  height: $input-height;
  padding: $input-padding-y $input-padding-x;
  // ... 40-some lines elided ...
}

参考：https : //github.com/twbs/bootstrap/blob/275cd7f91eed9f4051d85c295e5c14ef08937804/scss/_forms.scss

我的问题：我如何从整体上修改现有代码或使用form-control.

Answer 1

您将该类添加到文本输入元素（输入、选择、文本区域），例如<input type="email" class="form-control" value="" placeholder="Your email address" />这是 Bootstrap 强制表单元素看起来相同的方式。

CSS 这么长是因为它们考虑了浏览器在本地呈现这些元素的方式的所有差异。