SharePoint Online 无法扩展 Web 部件区域宽度

Question

我在 SharePoint Online (2013) 网站上有一个博客子网站，默认情况下有 3 个 Web 部件区域：BlogNavigator、Left 和 Right（从左到右排序）。

区域的布局令人沮丧，因为考虑到右侧区域右侧的可用空间量，容纳网站实际内容的左侧区域相对较窄。

当我将所有 Web 部件从右侧区域移动到 BlogNavigator 时，左侧区域保持其大小，即使有向右扩展的空间。

我尝试在 SP Designer 的页面文件上手动声明左侧区域ContainerWidth，我尝试将CSS file 应用于页面以设置宽度，但似乎没有任何效果。

我什至删除了页面文件中对右侧区域的所有引用，将其完全删除，但左侧区域仍保持其原始宽度。

有什么方法可以改变这个区域吗？

Answer 1

开箱即用的 SharePoint 页面布局使用特殊的网格框架来布局不同的 Web 部件区域。

在布局css中定义的这个框架使用display: table和display: table-cell在水平布局中定位区域。

表格布局通常会导致与您所描述的类似的大小问题。

在我最近从事的一个项目中，我需要将表格布局修复为更加严格，以免出现尺寸问题。我正在处理的网站是一个发布网站，所以我不确定你博客上的类是否相同，但这是我用来调整网格框架的 CSS。

#DeltaPlaceHolderMain .ms-table {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  width: auto; }
  #DeltaPlaceHolderMain .ms-table > div[class*="tableCol"] {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; }

#DeltaPlaceHolderMain .tableCol-75,
#DeltaPlaceHolderMain .tableCol-33,
#DeltaPlaceHolderMain .tableCol-25,
#DeltaPlaceHolderMain .tableCol-50 {
  width: 100%;
  display: block;
  min-width: 0; }

#contentBox {
  padding-left: 15px;
  padding-right: 15px; }

#titleAreaRow {
  display: table; }

#contentRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

#sideNavBox {
  margin-right: 5px; }

#contentBox {
  min-width: 0;
  margin: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 0;
  flex: 1 0; }

#s4-titlerow,
#contentRow {
  max-width: 1450px;
  margin: 0 auto; }
@media screen and (min-width: 1020px) {
  #DeltaPlaceHolderMain .tableCol-75 {
    width: 66.666%; }
  #DeltaPlaceHolderMain .tableCol-33 {
    width: 33.333%;
  }
  #DeltaPlaceHolderMain .tableCol-25 {
    width: 33.333%; }
  #DeltaPlaceHolderMain .tableCol-50 {
    width: 50%; } }
@media screen and (min-width: 1340px) {
  #DeltaPlaceHolderMain .tableCol-75 {
    width: 75%; }
  #DeltaPlaceHolderMain .tableCol-25 {
    width: 25%; } }
* {
  outline: none; }

html {
  -webkit-text-size-adjust: 100%; }


/* Sidenav */
#sideNavBox {
  min-width: 180px;
  max-width: 300px;
  width: auto; }