css - Bootstrap 中的 padding-bottom css 错误？

Question

首先，我想说我是网页设计的新手，所以如果我打开了一个无用的线程，请原谅我。

也就是说，

我想我可能在 Bootstrap 中发现了一个奇怪的错误:在尝试为我正在构建的网站创建一个非常简单的 header 时，我注意到将 padding: 10px; 添加到CSS 将返回不同的左侧和顶部填充，但底部没有，因此导致文本完全偏离底部。

在我看来，Bootstrap 的行为是从 div 的顶部开始计算底部填充，而不是从底部开始。

因此，要为 100 像素高的 div 提供 10 像素的内边距，应该使用 padding-bottom: 110px; 老实说，这感觉有点奇怪。

这是我使用 Bootply 和 JSFiddle 制作的一个小演示/验证示例。两者都尝试使用 height: 100px; padding-bottom: 70px; 在 div 上，在 Bootstrap 上不起作用

使用 Bootstrap :http://www.bootply.com/mUYldKGmKE

JSFiddle:https://jsfiddle.net/7fqj65yy/

如何在 Bootstrap 上修复它:height: 100px;填充底部:170px; (我不能发布超过 2 个链接)

同时尝试使用 Chrome 和 Firefox。

告诉我你的想法，无论这是真的还是假的，如果我只是输入了一些愚蠢的东西，请关闭线程并将其从你的内存中删除。

谢谢

Answer 1

Bootstrap css 包含以下代码:

* {
  box-sizing: border-box;
}

这包括元素总宽度和高度中的填充(和其他框属性)。

此处演示:https://jsfiddle.net/ujosu13t/1/

在这里了解更多:https://css-tricks.com/box-sizing/