Html 如何轻松地增加 twitter 的 bootstrap css 系统中所有表单元素的字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9981411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I easily increase the font size of all form elements in twitter's bootstrap css system?
提问by Andrew Arrow
http://twitter.github.com/bootstrap/base-css.html#forms
http://twitter.github.com/bootstrap/base-css.html#forms
I have a simple Horizontal form like their example with labels and input text fields. How do I make all the labels font-size: 24px and all the inputs the right height, etc. I also need the harded coded margin of 140px width to increase so the labels don't wrap. That is, I'm looking for the best practice way to say: bigger!
我有一个简单的 Horizontal 表单，就像他们的示例一样，带有标签和输入文本字段。如何使所有标签字体大小：24px 和所有输入正确高度等。我还需要 140px 宽度的硬编码边距来增加，以便标签不换行。也就是说，我正在寻找最佳实践方式来表达：更大！
回答by Jordan
Why not just set form label to 24px and form input height to whatever matches?
为什么不将表单标签设置为 24px 并将表单输入高度设置为匹配的任何值？
form label {
font-size: 24px;
}
form input, form textarea, form select {
margin-left: 200px;
}
Just put this code somewhere after the bootstrap.css loads, and it'll override their defaults. You may also want to add selectors for the input type so that it doesn't do buttons.
只需在 bootstrap.css 加载后将此代码放在某处，它就会覆盖它们的默认值。您可能还想为输入类型添加选择器，以便它不做按钮。
回答by BluesRockAddict
Twitter's bootstrap uses lessfor compiling the code but they also allowyou to change some of the parameters via UI and download customized version. If those options aren't enough for you, you'd need to set up less and do customization/compiling yourself.
Twitter 的引导程序在编译代码时使用较少，但它们也允许您通过 UI 更改一些参数并下载自定义版本。如果这些选项对您来说还不够，您需要设置更少并自己进行定制/编译。
回答by Austin
Assuming you have the right setup, create a "filename".css.scss and use compass to watch the file (this will convert it to a css equivalent).
假设您的设置正确，请创建一个“文件名”.css.scss 并使用指南针查看文件（这会将其转换为等效的 css）。
Then in your __.css.scss file, do the following:
然后在您的__.css.scss 文件中，执行以下操作：
1)
$baseFontSize: 24px; @import "bootstrap";This changes size for all fonts but based on your question, I assume this is all you care about.
1）
$baseFontSize: 24px; @import "bootstrap";这会改变所有字体的大小，但根据您的问题，我认为这就是您关心的全部。
2) Not sure what you mean by making inputs the right height. But you could use the mixin .box-sizing() (http://twitter.github.com/bootstrap/less.html) or set the bottom height of your input element to match you label like so:
2）不确定输入正确的高度是什么意思。但是您可以使用 mixin .box-sizing() (http://twitter.github.com/bootstrap/less.html) 或设置输入元素的底部高度以匹配您的标签，如下所示：
input{position: relative; bottom: 5px;}
3) for the labels to not wrap, put your form in a div with class = "fluid-container spanX" where X is whatever number of grids you need.
3) 对于不包装的标签，将您的表单放在 class = "fluid-container spanX" 的 div 中，其中 X 是您需要的任意数量的网格。
Compass will generate a css file from which you can copy the syntax and paste into your project.
Compass 将生成一个 css 文件，您可以从中复制语法并粘贴到您的项目中。
Hope this helps
希望这可以帮助
