如何轻松增加 Twitter 引导 CSS 系统中所有表单元素的字体大小？

Question

http://twitter.github.com/bootstrap/base-css.html#forms

我有一个简单的水平表单，就像他们的例子一样，有标签和输入文本字段。我如何使所有标签的字体大小：24px，所有输入的高度都合适，等等。我还需要增加140px宽的硬编码边距，这样标签就不会换行。也就是说，我正在寻找最好的实践方式来说：更大！

Answer 1

为什么不将表单标签设置为24px，并将表单输入高度设置为匹配的高度？

form label {
    font-size: 24px;
}
form input, form textarea, form select {
    margin-left: 200px;
}

只要把这个代码放在bootstrap.css加载之后的某个地方，它就会覆盖它们的默认值。您可能还想为输入类型添加选择器，这样它就不会执行按钮操作。

Answer 2

Twitter的引导程序编译代码使用较少，但它们也允许您通过UI更改一些参数并下载自定义版本。如果这些选项对你来说还不够，你需要减少设置，自己进行定制/编译。

Answer 3

假设您有正确的设置，创建一个"filename".css.scs并使用compass监视该文件（这将把它转换为等效的css）。

然后在__.css.scs文件中，执行以下操作：

1）$baseFontSize: 24px; @import "bootstrap";这会更改所有字体的大小，但根据您的问题，我想这就是您所关心的。

2） 不确定将输入设置为正确的高度是什么意思。但是你可以使用mixin.box-sizing（）(http://twitter.github.com/bootstrap/less.html)或者设置输入元素的底部高度以匹配您的标签，如下所示：

input{position: relative; bottom: 5px;}

3） 要使标签不换行，请将表单放在class="fluid container spanX"的div中，其中X是所需的网格数。

Compass将生成一个css文件，您可以从中复制语法并粘贴到项目中。

希望这能帮助