为什么bootstrap 3使我的所有字体变小？

Question

我是bootstrap的新手,我在我的项目中添加了bootstrap 3并缩小了所有字体大小,我从未在这些类中指定任何字体大小.我认为bootstrap 3的默认大小为14 ..我还需要做些什么吗？

谢谢

Answer 1

由于第1097行的这个块,它似乎正在发生,至少从版本3.3.6开始:

html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

您可以通过将其添加到样式表来恢复字体大小:

html
{
    font-size: 100%;
}

Answer 2

您可以自定义/覆盖任何内容 - 例如，如果您在引导文件之后加载您的 css 文件，那么您的设置将覆盖它。无论你梦想什么：

p {
  font-size 18px;
}

等等...

我强烈建议深入研究源代码：https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

更新：澄清一下，“不”你不应该做任何其他事情。听起来好像还有另一个问题。自原始答案日期以来，链接的源代码已发生更改...截至 2015 年 2 月，它看起来像这样：

html {
  font-size: 10px;
}
body {
  font-size: 14px;
}

假设我们已经正确设置了我们的项目，（bower install bootstrap非常简单）...尝试回显外部的文本body应该会产生 10 像素的文本，内部body应该是 14 像素。

如果您在正文中看不到 14 点文本，则可能有其他东西踩在上面。接下来，我将在 Chrome 中进行检查（例如）以确认字体大小的来源。

我想补充一点，我认为这有助于理解我们在这个 /dist/css 文件中看到的这些值是如何从较少的变量派生的......默认值应该开箱即用，但您可以轻松控制一切，包括正文文本大小：请参阅http://getbootstrap.com/css/#less-variables。