Question

我正在使用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进行测试。

Answer 1

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

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

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

p{
  line-height: 1.4em;
}

Answer 2

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

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

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

Twitter Bootstrap和<p>默认高度：为什么28px？</p>

2 个答案: