文章/答案/技术大牛

发布

社区首页 >问答首页 >引导容器在中型设备和小型设备上全屏显示，但在大型设备上半屏显示

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

Stack Overflow用户

提问于 2019-12-13 09:43:56

回答 2查看 580关注 0票数 1

我使用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>

在大屏幕上的屏幕截图，这是我要求的完美

在小屏幕上，如下图所示，应删除空格并占据整个屏幕

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

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-12-13 14:39:46

对于中型设备(设备宽度<= 1024px)，您需要根据需要添加更改容器宽度的介质查询。

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

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

票数 2

Stack Overflow用户

发布于 2019-12-13 12:58:30

为您的容器类添加此css：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59315049

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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