css - 使用左侧菜单时，我的页面布局有问题

Question

请您看一下 Bootstrap 4.1 页面的布局: http://demo2.nilov-sergey-demo-apps.tk/admin/warehouses/2/edit 它在凭据下用户:admin@demo.com pass:111111

我创建了一个左侧菜单(它必须隐藏在小型设备上)。 但是对于这个菜单，我想修复一些功能:

1) 我需要页面内容(蓝色边框)居中并且由样式决定:

.wrapper {
  display: flex;
  align-items: stretch;
  border: 2px dotted red;
  margin-right: auto;
  margin-left: auto;
  padding: 0 !important;
}

#page-wrapper {
  margin-right: 10px;
  margin-left: 10px;
  padding: 0 !important;
  width: 100% !important;
  border: 1px solid blue !important;
  align-content: center;
}

看起来原因是包装类的 props display 和 align-items，但是当我试图修改这些值时 左侧菜单停止工作

2) list http://demo2.nilov-sergey-demo-apps.tk/admin/clients必须水平滚动，而不是滚动带有语法数据的表格

    <div class="table-responsive">
        <div id="get-client-dt-listing-table_wrapper" class="dataTables_wrapper no-footer">
           ....
        </div>
    </div>

整个页面通过鼠标滚动水平滚动。

如何解决？

谢谢!

Answer 1

首先，您需要将 main 的宽度设置为:

width: calc(100% - 265px);

265px = 导航栏宽度的 250px + 导航栏右侧的 15px 边距

和page-wrapper的宽度:

width: calc(100% - 20px)!important;

20px = 10px margin-left + 10px margin-right

和 2) 应该有效

对于 1)，您应该为 page-wraper 和 margin 设置一个最大宽度:auto；居中。我建议你为这个页面或在外部容器中设置一个类，并像这样设置样式:

.warehouses #pagewrapper {
    max-width: 500px;
    margin: auto;
}

避免影响其他页面。