引导容器在中型设备和小型设备上全屏显示，但在大型设备上显示一半

Question

我正在使用引导容器来满足我的要求。该容器完全适合我想要的大屏幕。但我的要求是在中屏和小屏上填满容器

容器在小屏上是全宽的，但是对于中屏来说，宽度和大屏一样。

我的屏幕变量

$xsBreakpoint: 0px;
$smBreakpoint: 576px;
$mdBreakpoint: 768px;
$lgBreakpoint: 1024px;
$xlBreakpoint: 1200px;

容器 css 占据全高

.container {
      padding: 0px 0 !important;
    }

使用容器的 HTML 组件

<div class="container">
  <app-help-support-component></app-help-support-component>
</div>

大屏幕截图，完美符合我的要求

如下图的小屏，要去掉空格，占据整个屏幕

我想删除空间，容器应该占据整个宽度。

Answer 1

您需要根据需要添加媒体查询以更改中型设备的容器宽度（设备宽度

要在中型设备中更改容器宽度，您需要在 css 中添加以下媒体查询代码：

@media (max-width: 1024px){
  .container {
    max-width: 100%;
  }
}

Answer 2

为你的容器类添加这个 css：

@media (max-width: 1199px){
.container {
    max-width: 100% !important;
    padding: 0 !important;
    }
}