С левым меню у меня проблемы с макетом страниц

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;
}

Внешний видНапример, причина в отображении реквизита и выравнивании элементов класса-оболочки, но когда я попытался изменить эти значения, левое меню перестало работать

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 = 250 пикселей ширины панели навигации + 15 пикселей поля справа от панели навигации

и шириныpage-wrapper к этому:

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

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

и 2) должно работать

Для 1) вы должныустановить максимальную ширину для обёртки страницы и поля: auto;быть в центре.Я предлагаю вам установить класс для этой страницы или во внешнем контейнере и установить стиль следующим образом:

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

, чтобы избежать воздействия на другие страницы.