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 回答