Sharepoint 2013 SharePoint Online无法扩展web部件区域宽度
我在SharePoint Online(2013)网站上有一个博客子网站,默认情况下该网站有3个web部件区域:BlogNavigator、Left和Right(从左到右排序) 分区的布局令人沮丧,因为考虑到右分区右侧的可用空间量,包含站点实际内容的左分区相对狭窄 当我将所有Web部件从右侧区域移动到BlogNavigator中时,左侧区域保持其大小,即使有向右扩展的空间 我曾尝试在SP Designer中手动声明页面文件上的左侧区域,我曾尝试对页面应用a来设置宽度,但似乎没有任何效果 我甚至删除了页面文件中对右侧区域的所有引用,将其完全删除,但左侧区域仍然保持其原始宽度Sharepoint 2013 SharePoint Online无法扩展web部件区域宽度,sharepoint-2013,sharepoint-designer,Sharepoint 2013,Sharepoint Designer,我在SharePoint Online(2013)网站上有一个博客子网站,默认情况下该网站有3个web部件区域:BlogNavigator、Left和Right(从左到右排序) 分区的布局令人沮丧,因为考虑到右分区右侧的可用空间量,包含站点实际内容的左分区相对狭窄 当我将所有Web部件从右侧区域移动到BlogNavigator中时,左侧区域保持其大小,即使有向右扩展的空间 我曾尝试在SP Designer中手动声明页面文件上的左侧区域,我曾尝试对页面应用a来设置宽度,但似乎没有任何效果 我甚至
有什么方法可以更改此区域吗?现成的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; }