Question

我无法全神贯注于如何使用Bootstrap提供的form-control类的策略。

一方面，我从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 ...
}

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

我的问题：如何使用form-control整体修改现有代码或编写新代码。

Answer 1

您将该类添加到文本输入元素（输入，选择，文本区域），例如scanf。这是Bootstrap强制表单元素看起来相同的方式。

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

Answer 2

Bootstrap表单控制类用于使元素适合容器

<div>
<input type='text' class='form-control'>
</div>



div{
width: 400px; 
background: gray;
}

Answer 3

再次定义.form-control类。它将覆盖现有的Bootstrap .form-control中的属性。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
.form-control {
  border-radius: unset;
}
</style>

<input class="form-control" type="text" value="Test">

引导表单控件类有什么用？

3 个答案: