3

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

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

如何解决所有<p>问题<p>Paragraph text could be any size and not jump out of the parent div</p>？

好的，这是一个更新：

<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 进行测试。

4

2 回答 2

1

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

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

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

p{
  line-height: 1.4em;
}
于 2012-08-01T14:40:53.173 回答
1

将站点中的所有段落元素更改为 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>
于 2012-08-01T15:08:44.533 回答