css - Twitter Bootstrap 和 <p> 默认高度 : why 28px?

标签 css html twitter-bootstrap paragraph

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

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

最佳答案

正如其他人所说, Bootstrap 对 p 所做的唯一(重要)事情是:

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

都继承自body。最简单的解决方法是更换 line-height font-relative value 的值:

p{
  line-height: 1.4em;
}

关于css - Twitter Bootstrap 和 <p> 默认高度 : why 28px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11761295/

相关文章:

css - 如何在使用float时拉伸(stretch)子元素的背景颜色,使其与父元素具有相同的高度?

javascript - 强制 flexbox div 收缩以保持所有元素适合屏幕

c# - DotLess LessCss 编译器与 WebEssentials LessCss 编译器不同

javascript - 将数组对象显示为表格

html - 如何通过 css 创建与所有图像和缩略图大小相对应的方形缩略图

html - 尝试将移动屏幕的 Bootstrap 列中的元素居中(媒体查询)

javascript - 视觉 Div 重新定位 onclick css js

javascript - Bootstrap 3 表分页错误

html - 按钮网格,它们之间的间距很小

html - 有没有一种方法可以仅在 <tbody> 中仅使用 CSS 时才显示 <tr> ?