如何在Twitter Bootstrap 3中避免在所有输入框中使用form-control？

Question

我正在使用一个自动生成 HTML 的框架来构建网站。Twitter Bootstrap 3 需要在每个输入框中添加 "form-control" 类来正确地应用这些输入框的宽度。问题是，如果要从代码中添加该 CSS 类，我需要在许多地方更改框架。

是否有解决办法？也许有一些 JavaScript/jQuery 可以搜索表单中的所有标签，对于找到的每个标签，它可以查找相应的输入框，最后添加 CSS 类？但我真的不知道怎么做。

非常感谢您提供任何帮助。

- Mariano Martinez Peck

Answer 1

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

如果你有一个表单的ID想要应用这个样式，可以参考以下方法：

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

您需要确保添加了表单中所有的字段类型，但是上面的代码行可能已经涵盖了大部分情况。这种方法比较hacky，根据您使用的框架，可能有一些mixin或函数可以在自动生成的表单中包含类名。

- cjd82187

---

谢谢。这对我来说是最简单的解决方案。我需要从输入中排除按钮、提交和复选框，但其余部分是正确的。我选择了这个解决方案，因为我使用的框架在这方面不容易扩展。 - Mariano Martinez Peck

我也开始使用jQuery来做这件事，但我想知道这是否是“不好的做法”？ - mxmissile

Answer 2

我没有遇到过这个具体的问题，但通常在使用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 元素。我没有尝试过，但值得一试！

- Olly Hodgson

---

谢谢。我应该说一下，我使用的框架已经使用了Bootstrap CSS，所以我认为使用LESS会有点复杂。但还是感谢您的建议。没有办法用CSS来做到这一点，对吧？ - Mariano Martinez Peck

你可以手动复制所有的.form-control选择器和样式来满足你的需求。但是，如果框架已经使用了基于Less构建的Bootstrap（本身就是一个框架），那么只要你仅仅增强它们，你肯定可以使用Bootstrap的less文件。不过，老实说，修复框架本身似乎是你最好的选择。 - Olly Hodgson

Answer 3

这是一个糟糕的想法，因为它是对Bootstrap的“hacky”实现。你不仅需要类，还需要正确的HTML结构。试图编写一些神奇的JavaScript来实现这两个更改所需的时间，最好花在修改框架上。

- David Nguyen

---

是的，我也考虑过这个问题。好的，忘掉JavaScript解决方案吧。Bootstrap本身没有解决方法吗？我可以在输入框或标签周围添加div，或者轻松地为标签添加CSS。唯一复杂的部分是为输入框添加CSS。 - Mariano Martinez Peck

@MarianoMartinezPeck，总有办法解决问题，但是你需要自己动手制作一些东西，因为没有现成的工具可以满足你的需求。 - David Nguyen

Answer 4

一个解决方案是使用Bootstrap的Less类，而不是编译后的库，并在您的代码中添加必要的标签。请参考这篇文章。

- Cosmin SD