Twitter 的 Bootstrap - 表单输入太细答案

【问题标题】：Twitter's Bootstrap - Form Inputs Too ThinTwitter 的 Bootstrap - 表单输入太细
【发布时间】：2012-02-28 12:42:43
【问题描述】：

我正在使用 Twitter 的 Bootstrap 为我的网站创建 HTML/CSS。但是，我在创建表单时遇到了问题：

如您所见，输入对于文本来说太窄了。我已经使用自己的代码进行了测试，并从他们的文档中复制/粘贴了确切的代码：

我包括两个资源：

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

据我所知，它们加载正确。我是否缺少资源？

【问题讨论】：

您是否在 Chrome Inspector 或 Firebug 中检查过高度被覆盖的位置？
它正在从您的本地 css 中获得高度，查看您本地 css 中的表单输入并将其删除。单凭截图很难猜到
我已经尝试调整了一些东西并且我确实修复了它。我不确定我做错了什么，但我确实做错了——这不是默认行为。（另外，我没有本地 CSS。）编辑：一旦我弄清楚我哪里出错了，我会回来更新。

【解决方案1】：

好的，我遇到了同样的问题，经过数周寻找解决方案后，这个人解决了我的问题！

1 - 创建文件 assets/stylesheets/my_styles.css.scss

2 - 将下面的代码放入 my_styles.css.scss 文件中：

input[type=text], input[type=password], input[type=email], input[type=tel] {
height: 33px !important;}

3 - 在 assets/stylesheets/application.css 中，输入：

*= require my_styles

在引导后需要... 在我的情况下是：

*= require font-awesome
*= require bootstrap_sb_admin_base_v2
*= require_self
*= require my_styles
*= require_tree .
*/

希望它能帮助遇到麻烦的人！

【讨论】：

【解决方案2】：

为我解决的问题是将 class="form-control" 添加到输入中。

【讨论】：

【解决方案3】：

<!DOCTYPE html> 修复对我不起作用。但帮助的是在我们的代码库中查找和删除以下内容：

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

【讨论】：

【解决方案4】：

我遇到了这个问题并让我发疯了几个小时，因为原因完全不可见。我已经有了<!DOCTYPE html>，所有代码都很完美。问题原来是文本文件编码。

使用 linux 'file' 命令显示源文件编码为：“PHP script, UTF-8 Unicode (with BOM) text”。
在文件上运行“更多”会在文件开头显示一些垃圾字符（ï»¿）。我在 linux 中创建了新文件并复制/粘贴了代码，一切都开始按预期工作。

【讨论】：

【解决方案5】：

该死的。我错过了

<!DOCTYPE html>

在文档的顶部。

【讨论】：