css - twitter bootstrap box-sizing 破坏了我的布局

Question

当我在元素进行到一半时实现 Bootstrap 时，我的布局被破坏了，通过一些 css 修改修复了它，我已经注释掉了这一点

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

在 bootstrap.css 中，这会影响它的核心吗？我只想在我的元素中使用网格系统..

Answer 1

我有同样的问题，bootstrap 3 破坏了我现有的布局和第三方小部件。以下是我按照难度和稳定性递增的顺序尝试过的一些事情。

最简单的方法

仅当您不使用其他 Bootstrap 组件时才是安全的

加载 Bootstrap css 后添加以下 css:

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

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

这将仅对网格系统中的元素使用 border-box 大小调整。如果您在网格中有自定义小部件，这将不起作用，因为它们仍会应用 border-box。

更有针对性的方法

仅当您不使用其他 Bootstrap 组件时才是安全的

或者，您可以将自定义 col 类添加到已经应用了 col-*-* 的每个列 div，如下所示:

<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

然后改用下面的 css:

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

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

如果您只需要在您的元素中使用 Bootstrap 网格系统，这就可以正常工作。但是，如果您打算使用其他 Bootstrap 组件，我也不推荐这种方法，因为其他 Bootstrap 组件将取决于正在设置的 border-box。

挑选每个包含的元素进行修复

更好的方法是在小部件的特定父元素上将 box-sizing 覆盖为 content-box，如下所示:

.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

这种方法提供了与 future Bootstrap 组件的最佳向前兼容性，即使它现在看起来对你有用。