Bootstrap 4.1页面布局问题求助：内容居中和表格滚动异常

我来帮你搞定这两个Bootstrap布局问题，咱们一个个来解决：

问题1：让带蓝色边框的页面内容居中，同时保留左侧菜单功能 #

你说的.wrapper里的display: flex是维持侧边栏和主内容并排的核心，改它肯定会让侧边栏失效，这点你猜的没错。要实现内容居中又不破坏侧边栏，咱们换个思路调整：

1. 给.wrapper加个最大宽度，同时保留flex布局和左右自动外边距，这样整个侧边栏+内容区的容器就能居中：

.wrapper {
  display: flex; /* 这个绝对不能删，侧边栏全靠它撑着 */
  align-items: stretch; /* 保留这个，让侧边栏和内容高度对齐 */
  border: 2px dotted red;
  margin: 0 auto; /* 左右auto实现整个容器居中 */
  max-width: 1200px; /* 你可以根据需求改这个值，限制大屏下的宽度 */
  padding: 0 !important;
}

2. 调整#page-wrapper的样式，不用强制width: 100% !important（flex子项默认会填充剩余空间），如果需要蓝色边框里的内容再居中，给内部元素加样式就行：

#page-wrapper {
  margin: 0 10px;
  padding: 0 !important;
  border: 1px solid blue !important;
  /* 如果要让蓝色框里的内容水平居中，就加下面这几行 */
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
}

要是你只想让蓝色边框的内容区单独居中（侧边栏固定在左，内容区在剩余空间里居中），那给#page-wrapper加最大宽度和自动外边距，同时让它填充侧边栏之外的空间：

#page-wrapper {
  margin: 0 10px;
  padding: 0 !important;
  border: 1px solid blue !important;
  max-width: 900px; /* 内容区的最大宽度 */
  margin: 0 auto; /* 内容区自身居中 */
  flex: 1; /* 让内容区占满侧边栏剩下的空间 */
}

问题2：实现表格水平滚动，而不是整个页面滚动 #

你已经用了.table-responsive但没生效，大概率是这个容器的父元素没限制宽度，或者样式被其他代码覆盖了。试试这些修复方法：

1. 给.table-responsive的父容器加明确的宽度限制和隐藏溢出，避免表格撑破页面：

/* 你可以给表格所在的父容器加这个类，或者直接用现有选择器 */
.table-container {
  width: 100%;
  overflow: hidden;
}

2. 强制.table-responsive的核心样式生效，防止被其他CSS覆盖：

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 让移动端滚动更顺滑 */
  margin: 0; /* 去掉默认margin，避免超出父容器 */
}

3. 检查表格本身的样式，别给表格设固定宽度超过父容器，让它自然超出.table-responsive触发滚动：

#get-client-dt-listing-table_wrapper table {
  width: 100% !important;
  /* 如果想强制表格有滚动条，可以加个最小宽度，比如min-width: 1200px; */
}

另外还要注意，如果页面左侧有固定宽度的侧边栏，主内容区的宽度要设为calc(100% - 侧边栏宽度)，这样.table-responsive才能在主内容区内正确计算宽度，不会把整个页面撑得可滚动。

内容的提问来源于stack exchange，提问作者mstdmstd