padding-bottom css Bootstrap 中的错误？

Question

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

也就是说，

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

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

所以要给 100 像素高 div 10 像素的内边距，应该给 padding-bottom: 110px; 老实说感觉有点奇怪。

这是我使用 Bootply 和 JSFiddle 制作的一个小 demonstration/verification 示例。两者都尝试在 div 上设置 height: 100px; padding-bottom: 70px;，但在 Bootstrap

上不起作用

与 Bootstrap: http://www.bootply.com/mUYldKGmKE

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

如何在 Bootstrap 上修复它：height: 100px; padding-bottom: 170px; （我不能 post 超过 2 个链接）

尝试过 Chrome 和 Firefox。

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

谢谢

Answer 1

我认为使用这段代码是正确的，因为我已经尝试过这段代码 padding-bottom: 170px; 而不是 padding-bottom: 70px;

Bootstrap 不添加 padding-bottom 的像素但它替换它

这是我的例子

.black {
    width: 150px;
    height: 100px;
    background-color: #000;
    padding-bottom: 170px; /* instead of padding-bottom: 70px;*/
    color: #ab5469;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="black">
  Something to say
</div>

Answer 2

Bootstrap css包含以下代码：

* {
  box-sizing: border-box;
}

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

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

在此处了解更多信息：https://css-tricks.com/box-sizing/

padding-bottom css Bootstrap 中的错误？

padding-bottom css bug in Bootstrap?

css

debugging

padding

twitter-bootstrap

twitter-bootstrap-3