wordpress - Bootstrap 3 issue with Genesis widgets/sidebars

Question

I have found the following code in Bootstrap's css interferes with my Genesis theme's layout - causing widgets to display a little off. Normally it would seem like a padding/margin/width issue. I have disabled the code in boostrap to make the widgets appear correctly, but I want to be able to use the columns/rows from bootstrap in my pages. Is there an easy way to fix this?

*,
*: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 中，应在引导后加载，将以下规则应用于关闭的 div：

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