Twitter Bootstrap 和 默认高度：为什么是 28px？答案

【问题标题】：Twitter Bootstrap and default height: why 28px?Twitter Bootstrap 和 默认高度：为什么是 28px？
【发布时间】：2012-08-01 23:17:18
【问题描述】：

我正在使用 Twitter Bootstrap。一切顺利，但some text with the font-size of 50px 跳出了父<div>。一旦我将 bootstrap.min.css 作为样式表删除，一切正常。

似乎 Twitter Bootstrap 在段落上应用了一些属性（高度、垂直填充），因为我自己的 css 文件中没有 p 标签的其他属性。

如何修复所有，使Paragraph text could be any size and not jump out of the parent div？

好的，这是更新：

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <style>
    p {
      border:1px solid red;
      font-size:55px;
    }
  </style>
</head>

<body>
  <p>The text of more than 18 px is out of the red border if bootstrap.min.css connected </p>
</body>

请不要忘记连接 bootstrap.min.css 进行测试。

【问题讨论】：

Bootstrap 仅对某些元素应用最小高度。对于
元素，没有最大高度限制。但是，如果您使用大字体，请尝试更改该段落的行高。（默认为行高：18px；）
唯一适用于p的css引导程序是9px的margin-bottom，并从body继承13px的font-size和18px的line-height。也许发布一些示例代码。

标签： css html twitter-bootstrap paragraph

【解决方案1】：

正如其他人所说，引导程序对p 所做的唯一（重要）事情是：

font-size: 13px;
line-height: 18px;

都继承自body。最简单的解决方法是将line-height 值替换为font-relative value：

p{
  line-height: 1.4em;
}

【讨论】：

【解决方案2】：

将您网站中的所有段落元素更改为 55 像素的字体大小是个坏主意。不要用最少使用的自定义覆盖基本元素。我认为对您来说更好的解决方案是制作自己的自定义段落类并在需要大文本时使用它。

p.large {
    border: 1px solid red;
    font-size: 55px;
    line-height: 60px;
}

<p class="large">some text with the font-size of 55px</p>

【讨论】：

我刚刚展示的是一个不使用类的简短示例。但是，感谢您的通知。