Question

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

这个东西是包含Bootstrap CSS使得“帮助”符号和“专注于内容”按钮变得有些混乱。问题是这个引导程序CSS文件中的一行代码。它是“盒子大小：边框”;当它关闭时（使用Inspect Element工具时）一切看起来都很好。我问的是如何删除/关闭CSS文件中的这行代码，以便我可以包含这个CSS文件没有问题？

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

感谢。

Answer 1

在我的品牌推广中使用bootstrap时，我的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和ribbon rows部分。希望这会有所帮助。

Answer 2

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

要修复此问题，我必须进入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}：之后，：之前{-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部件。我不需要整个网站的引导程序。更不用说，我非常新手。我很擅长操纵其他人的代码来获取所需的东西，但我仍在完善自己的技能，以保持良好的作风...之所以如此，是因为有人可能会对我如何解决此问题发表评论。

Answer 3

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

确保页面顶部有<!DOCTYPE html>
尝试在样式标记上包含type属性（HTML5不需要），并确保样式覆盖包含在引导程序导入下面
为样式覆盖添加！important

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

如何从Bootstrap CSS中删除box-sizing：border-box？

3 个答案: