css - 我怎样才能解决对 Bootstrap 3 的表单控制类的需求？

Question

我决定今晚第一次试用 Bootstrap 3。我注意到，为了获得默认的、漂亮的表单字段样式，您需要为每个输入、文本区域、选择等添加一个 form-control 类。这对那些动态的人来说是一个痛苦生成它们的表单(例如，使用 Django)。 Django 允许您设置表单字段的属性，但要在全局范围内这样做将需要一个讨厌的猴子补丁或非常非 DRY 代码。

1. 有没有办法避免这个类的要求，仍然保留基本的表单字段样式？
2. 有没有快速的方法(最好是非 JS)来解决这个问题？

Answer 1

我想知道为什么下面的答案首先遭到否决。我找到了关于 form-group 的答案而不是 form-control类(class)。类(class)form-control添加了许多 CSS 规则。

您应该首先尝试控制您的表单输出:https://stackoverflow.com/a/8474452/1596547

如果你不能，你可以试试下面的方法。对您的输入应用相同的规则而不是 form-control ，比如:

input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

少

有了 LESS > 1.4，你可以使用 :extend() ，参见:https://stackoverflow.com/a/15573240/1596547 .您可以通过向 less 文件添加规则来将其用于上述目的:

input {
  &:extend(.form-control all);
}

另见:Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

<罢工> form-group是围绕您的输入/标签构建的容器 div，它只添加一个 margin-bottom: 15px; .没有它你可以构建你的表单。因此，它不是必需的。

使用 css 你可以做一些变通方法。我认为您不能总是避免使用 Javascript。 我不知道您的 Django 表单的 HTML 结构。我使用了 http://getbootstrap.com/css/#forms 中的示例表单并剥离 form-control容器。然后我“修复”差异。注意我还添加了 <br>提交按钮前的标记。

参见:http://bootply.com/73370

1) form-group添加 margin-bottom: 15px;为了解决这个问题，我将这个边距添加到输入标签中:

input {
    margin-bottom: 15px; }

这适用于复选框(和单选)。 Bootstrap CSS 定义 input[type="radio"], input[type="checkbox"] { line-height: normal; margin: 4px 0 0; }这会否决(由 CSS 特异性引起，请参阅:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/)上面输入的 css。

因此最终规则将是:

input, input[type="checkbox"]  {
    margin-bottom: 15px;
}

2) 复选框的标签也不同。注意复选框周围没有 form-control但是一个checkbox类代替。标签文本的 css 规则为:.radio label, .checkbox label { cursor: pointer; display: inline; font-weight: normal; margin-bottom: 0; }在这种情况下，您不能仅使用 CSS(标签是输入复选框的父级，CSS 中没有父级选择器，请参阅:Is there a CSS parent selector?)。使用 jQuery，您可以选择标签并添加一个类:

$('input[type="checkbox"]').parent("label").addClass('checkboxlabel');

现在使用与 .checkbox label 相同的规则将此类添加到您的 CSS :

.checkboxlabel
{
    cursor: pointer;
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
} 

我认为现在两种形式看起来基本相同:

<罢工> 另请阅读:Django Forms and Bootstrap - CSS classes and <divs>