0

我正在关注这个 Ruby on Rails教程，在完成注册表单的 html 和 css 的步骤之后，我得到了下面的第一张图片。与教程显示我应该得到的第二张图片相比，输入文本字段要小得多。有人可以解释这是怎么发生的吗？

在此处输入图像描述 在此处输入图像描述

4

3 回答 3

0

这可能是因为页面显示在不同的浏览器中，甚至显示在同一个浏览器中，您的字体设置（大小、默认字体系列等）可能与另一个不同

于 2012-08-23T22:35:01.550 回答
0

当您未设置 HTML5 文档类型时，Bootstrap 会发生这种情况。确保您已<!DOCTYPE html>在布局的顶部，如教程的清单 7.1 所示。

那里发生了什么？我不知道这里使用的是什么 HTML5 功能，但 Bootstrap 假设它是可用的。您的浏览器将页面视为 5 之前的 HTML 并且无法正确呈现。因此，添加 doctype 会指示浏览器按照 Bootstrap 所期望的方式进行操作。

见顶部：http: //twitter.github.com/bootstrap/scaffolding.html

于 2012-08-23T22:57:02.677 回答
0

我发现 Bootstrap 为表单中的输入字段生成了 css input[type="something"]。这解释了为什么仅input在指定 css 时使用不起作用，因为 Bootstrap 生成的更具体的 css 规则会覆盖我的规则。

/* line 59, ../../../../.rvm/gems/ruby-1.9.3-p194/gems/bootstrap-sass-2.0.4.0/vendor/assets/stylesheets/bootstrap/_forms.scss */
select, textarea, input[type="text"], input[type="password"], input[type="datetime, [type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 18px;
    color: #555555;
}
于 2012-10-04T05:21:54.203 回答