4

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

我有一个简单的水平表单,例如带有标签和输入文本字段的示例。如何使所有标签字体大小:24px 和所有输入正确高度等。我还需要 140px 宽度的硬编码边距来增加标签不换行。也就是说,我正在寻找最佳实践方式来表达:更大!

4

3 回答 3

2

为什么不将表单标签设置为 24px 并将表单输入高度设置为任何匹配项?

form label {
    font-size: 24px;
}

form input, form textarea, form select {
    margin-left: 200px;
}

只需在 bootstrap.css 加载后将此代码放在某处,它就会覆盖它们的默认值。您可能还想为输入类型添加选择器,以便它不做按钮。

于 2012-04-02T18:09:07.153 回答
2

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

于 2012-04-02T18:10:07.140 回答
2

假设您有正确的设置,请创建一个“文件名”.css.scss 并使用 compass 来查看文件(这会将其转换为等效的 css)。

然后在您的_ _.css.scss 文件中,执行以下操作:

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 文件,您可以从中复制语法并粘贴到您的项目中。

希望这可以帮助

于 2012-04-03T23:50:16.520 回答