如何从 Bootstrap CSS 中删除 box-sizing:border-box？答案

【问题标题】：How can I remove box-sizing: border-box from Bootstrap CSS?如何从 Bootstrap CSS 中删除 box-sizing:border-box？
【发布时间】：2015-10-31 06:24:25
【问题描述】：

我正在构建一个 SharePoint 2013 网站，并且我在网站中包含了 Bootstrap 缩小的 css v3.3.4 文件，以便能够将其选项卡用于组织目的。

这件事是包含 Bootstrap CSS 使得“帮助”符号和“关注内容”按钮变得有点混乱。问题是这个引导 CSS 文件中的一行代码。它是“box-sizing:border-box;”当它关闭时（使用检查元素工具时）一切看起来都很好。我要问的是如何删除/关闭 CSS 文件中的这行代码，以便可以毫无问题地包含此 CSS 文件？

注意：我在这里问这个问题是因为它与 CSS 和 Bootstrap 有关 - 在 SharePoint 堆栈交换上问它并不真正适合这个问题。

谢谢。

【问题讨论】：

如果你想完全删除它，只需编辑 css 文件...然后删除它。
问题是我应该从哪里删除它？当我搜索文本文件时，有十二个地方使用了该行。我应该删除对它的所有引用吗？或者我应该摆脱这十二个特定的一个？
坦率地说，我对 Bootstrap 的复杂性不是很熟悉，但是如果您已经确定了它的位置，只需将每一个注释掉，直到获得您想要的结果。
我刚刚打开了 CSS 并删除了对该行格式的所有引用，这就成功了。它在 SharePoint 中引入了一个新错误，但仅限于 Chrome。我，创建者，实际上是唯一一个在网站上使用 Chrome 的人，所以现在这很好。我会努力解决这个问题。

标签： css sharepoint twitter-bootstrap-3

【解决方案1】：

在我的品牌推广中使用引导程序时，我的 SharePoint 2013 网站也遇到了同样的问题。您需要通过在 corev15.css 和 bootstrap.css 引用之后添加另一个 css 文件来覆盖效果，其中包含以下内容：

#suiteBar *, #s4-ribbonrow * 
{
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing:content-box;
}

这会将 box-sizing:content-box 定位到 SharePoint 页面的 suiteBar 和功能区行部分。希望这会有所帮助。

【讨论】：

【解决方案2】：

我知道我迟到了这篇文章，但我只是遇到了这个问题。当我将自定义 HTML 插入我的 SharePoint 2013 页面（使用 CEWP）时，它弄乱了套件栏中完全相同的符号。

要修复它，我必须进入 bootstrap.min.css 并将 box-sizing:border-box 更改为 box-sizing:content-box。

bootstrap.min.css 中要更改的代码行如下：

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

然后我的自定义表格标题和井延伸到容器区域之外。为了解决这个问题，我在这里找到了答案How to override CSS Box Sizing for just one area on page?

我用来让我的 Web 部件自行更正的内联 CSS 是：

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

请记住...我仅将引导程序用于特定的 Web 部件。我的整个网站不需要引导程序。更不用说，我是一个新手。我很擅长操纵其他代码以获得我需要的东西，但我仍在磨练我在良好实践方面的技能......我这么说是因为有人可能会对我如何解决这个问题发表评论。

【讨论】：

【解决方案3】：

doctype 和 quirks 模式可能存在问题。

确保您的页面顶部有 <!DOCTYPE html>
尝试在样式标签中包含类型属性（HTML5 不需要）并确保样式覆盖包含在引导导入下方
将 !important 添加到样式覆盖

<style type="text/css"> #ms-help, #fullscreenmodebox {box-sizing: content-box !important;} </style>

【讨论】：

我应该在 CSS 文件本身中添加这些代码行吗？目前我有它，以便页面将从它们存储在站点库中的位置加载 CSS 文件，然后完成样式的代码（如您在上面所看到的）应该激活，但它仍然什么都不做。跨度>
您可以在css文件的末尾添加#ms-help, #fullscreenmodebox {box-sizing: content-box !important;}。
我认为从功能上讲，这与@MiguelGatmaytan 所说的相同，实际上它确实修复了我的符号错误——CSS 也只是为 chrome 中的用户引入了一个新错误。不过没关系。我刚刚删除了这些行，它的工作原理与添加此代码相同。