0

这是我在容器右侧使用非常有用的第二个问题twitter-bootstrap，但是这一次，我已经能够在 jsFiddle 上重现它！

这是链接，正如您在 CSS 窗口中看到的那样，我在 div 上应用 apadding-left和 a padding-right，左侧使 div 越过右侧的父级，如果我只应用 a padding-right，我得到相同的结果。

我无法理解这种行为，这可能是我在另一个项目中遇到的相同问题，如何避免这种情况？

4

2 回答 2

1

这是一个工作示例

您所要做的就是指定一个宽度。我添加了一个边框只是为了查看 div。

#child {
    width: auto;
    border: 1px solid red;
    padding-left: 50px;
    padding-right: 50px; 
}
于 2013-04-01T02:22:40.093 回答
1

您观察到的行为源于两个事实：首先，Bootstrap 行设置为width: 100%. 其次，他们使用默认的 box-sizing 值，content-box.

Box-sizing 是决定如何计算块元素宽度的属性。当它设置为 content-box 时，它只考虑内容的宽度，而不考虑边距、填充或边框。接下来是您设置的填充添加到总宽度中，使其大于 100%，并使其超出父项。

对于您想要设置为的box-sizing行为padding-box。这会导致元素的计算宽度包括填充。

在 JSFiddle 上查看

#child {
  ...
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

有关 box-sizing 属性的更多信息，我推荐两个很棒的 CSS 资源：Chris Coyier 的CSS Tricks和MDN。

于 2013-04-01T02:23:09.657 回答