Question

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

那就是说，

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

这个存在的行为，IMO，Bootstrap正在从div的顶部开始计算底部填充，而不是从底部开始。

因此，为了给100px高的div提供10px填充，应该给padding-bottom: 110px;，这听起来有点奇怪。

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

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

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

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

尝试使用Chrome和Firefox。

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

由于

Answer 1

Bootstrap css包含以下代码：

* {
  box-sizing: border-box;
}

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

在这里演示：https://jsfiddle.net/ujosu13t/1/

点击此处了解详情：https://css-tricks.com/box-sizing/

Answer 2

我认为使用此代码段是正确的，因为我已尝试此代码 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>

Bootstrap中的padding-bottom css错误？

2 个答案: