Question

能否请您查看Bootstrap 4.1页面的布局： http://demo2.nilov-sergey-demo-apps.tk/admin/warehouses/2/edit 它以凭据用户：admin@demo.com通过：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;
}

看起来原因是在包装类的道具展示和对齐项目中，但是当我尝试修改这些值时左侧菜单停止工作

2）列表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 +右边距10px

和2）应该起作用

对于1），您应该为页面包装器和边距设置最大宽度：自动；要居中。我建议您为此页面或外部容器设置一个类，并设置如下样式：

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

以避免对其他页面造成影响。

使用左侧菜单时，页面布局存在问题

1 个答案: