Genesis小部件/侧边栏的Bootstrap 3问题

Question

我发现Bootstrap的css中的以下代码干扰了我的Genesis主题的布局 - 导致小部件显示一点点。通常它看起来像填充/边距/宽度问题。我已经禁用了boostrap中的代码以使小部件正确显示，但我希望能够在我的页面中使用bootstrap中的列/行。有没有一种简单的方法来解决这个问题？

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 1

取决于什么是

边界框

The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties

内容框

This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height

在你的css中，应该在bootstrap后加载以下规则到你的div关闭：

.widget-div, 
.widget-div:before,
.widget-div:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}