css - Bootstrap 容器在中型设备和小型设备上全屏显示，但在大型设备上显示一半

Question

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

容器在小屏幕上是全宽的，但是对于中等屏幕，宽度与大屏幕相同。

我的屏幕变量

$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

您需要添加媒体查询以根据需要更改中型设备的容器宽度(设备宽度 <= 1024 像素)。

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

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