0

我做了一个古腾堡 .alignfull 课程

margin-left  : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width    : 100vw;

效果很好。

我已经在...中放置了一个引导容器

<div class="alignfull green-bg">
    <div class="container">
        Hello
    </div>
</div> 

这可以很好地将内容保留在网格中。但是,当我在较小的屏幕上查看时,它会停止工作。

通常会从浏览器边缘反弹的填充和边距会离开页面。

所以我的内容是靠墙的,而不是像一个好的引导容器那样被填充。

有谁知道解决这个问题?


我尝试了不同的 CSS

width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;

我正在考虑使用媒体查询来覆盖较小屏幕上的 alignfull。我只是觉得应该有一种仍然支持.container的css方式来做到这一点。

谢谢

4

1 回答 1

0

为什么不尝试更改 alignfull css 类,以便它们仅适用于较大的屏幕,如下所示:

@media all and (min-width: 768px) {
  margin-left  : calc( -100vw / 2 + 100% / 2 );
  margin-right : calc( -100vw / 2 + 100% / 2 );
  max-width    : 100vw;
}

确保调整断点 (768px) 以适合您的项目。

于 2018-11-21T04:58:26.937 回答