如何避免使用 Twitter Bootstrap 3 在所有输入中进行表单控制？答案

【问题标题】：How to avoid form-control in all inputs with Twitter Bootstrap 3?如何避免使用 Twitter Bootstrap 3 在所有输入中进行表单控制？
【发布时间】：2013-11-20 17:59:55
【问题描述】：

我正在构建一个带有自动生成 HTML 框架的网站。 Twitter Bootstrap 3 需要在每个输入中添加“表单控制”类，以正确地将宽度应用于此类输入。问题是要从代码中添加那个 css 类，我需要在很多地方更改框架。

有解决办法吗？也许一些 javascript/jquery 在我的表单中搜索所有标签，对于每个标签，它会找到相关的输入并最终添加 css 类？但我真的不知道该怎么做。

提前感谢您的帮助。

【问题讨论】：

标签： css forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是一个坏主意，因为它是引导程序的“hacky”实现。您不仅需要类，还需要正确的 html 结构。尝试编写一些神奇的 javascript 来实现这两个更改的时间最好花在修改框架上。

【讨论】：

是的，我也想过。好的，忘记javascript解决方案。 Bootstrap 本身没有解决方法吗？我可以在输入或标签周围添加 div。我可以轻松地将 css 添加到标签等。唯一复杂的部分是将 css 添加到输入中。
@MarianoMartinezPeck 总有一种解决方法，但你必须自己做一些事情，因为没有什么东西可以开箱即用。

【解决方案2】：

您可以编辑 forms.less 并重新编译 css，但这可能会很棘手，因为您不希望所有输入或文本区域都具有 .form-control 样式。

如果您有一个 ID 用于您的表单并将其应用到，这应该会有所帮助：

$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');

您需要确保添加了表单中的所有表单字段类型，但上述行可能会涵盖其中的大部分。不过，这很 hacky，根据您的框架，可能会有某种 mixin 或函数来在自动生成的表单中包含类名。

【讨论】：

谢谢。这对我来说是最简单的解决方案。我需要从输入中排除按钮、提交和复选框，但其余的都是正确的。之所以采用这个解决方案，是因为我正在使用的框架在这方面并不容易扩展。
我也开始用 jquery 来做这件事，但我想知道这是否是“不好的做法”？

【解决方案3】：

解决方案可能是使用 Bootstrap 的 Less 类而不是编译库，并以某种方式在代码中添加必要的标签。

看看这个article。

【讨论】：

【解决方案4】：

我没有遇到过这个特定的问题，但一般来说，在使用 Bootstrap 3 时，我会自己构建 .less 文件，并使用我自己的特定更改，例如在我的 .less 文件中：

/* Import the Bootstrap 3 .less files */
@import url('../../Bootstrap/less/bootstrap.less');

/* Now implement my own styling below */

使用 .less，您可能能够从框架的相关部分提取相关样式，如下所示（其中 .mydiv 是您的容器元素）：

.mydiv {
    input,
    select,
    textarea {
        .form-control;
    }
}

这将引入 .form-control 样式并将它们应用于 .mydiv 中的 input、select 和 textarea 元素。这个我没试过，但值得一试！

【讨论】：

谢谢。我应该说我使用的框架已经使用了 Bootstrap css，所以我认为使用 LESS 会有点复杂。但谢谢你的想法。没有办法用 css 做到这一点，对吧？
您可以进入并手动复制他们所有的.form-control 选择器和样式以满足您的需求。但是如果框架已经使用了 Bootstrap（它本身是使用 Less 构建的），那么你肯定可以使用 Bootstrap 的 less 文件，只要你只增加它们。不过老实说，修复框架本身似乎是您的最佳选择。