如何使 bootstrap 容器在 gutenburg alignfull 中工作
How to make bootstrap containers work in gutenburg alignfull
我做了一个 gutenburg .alignfull class
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
效果很好。
我已经将一个 bootstrap 容器放入...
<div class="alignfull green-bg">
<div class="container">
Hello
</div>
</div>
将内容保留在网格中效果很好。但是,当我在较小的屏幕上查看时它停止工作。
通常会从浏览器边缘反弹的填充和边距离开页面。
所以我的内容是靠墙的,而不是像一个好的 bootstrap 容器应该填充的那样。
有人知道解决这个问题的方法吗?
我试过不同的 CSS
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
我正在考虑使用媒体查询来覆盖较小屏幕上的 alignfull。我只是觉得应该有一种 css 的方式来做到这一点,它仍然支持 .container。
谢谢
你为什么不尝试更改你的 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) 以适合您的项目。
我做了一个 gutenburg .alignfull class
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
效果很好。
我已经将一个 bootstrap 容器放入...
<div class="alignfull green-bg">
<div class="container">
Hello
</div>
</div>
将内容保留在网格中效果很好。但是,当我在较小的屏幕上查看时它停止工作。
通常会从浏览器边缘反弹的填充和边距离开页面。
所以我的内容是靠墙的,而不是像一个好的 bootstrap 容器应该填充的那样。
有人知道解决这个问题的方法吗?
我试过不同的 CSS
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
我正在考虑使用媒体查询来覆盖较小屏幕上的 alignfull。我只是觉得应该有一种 css 的方式来做到这一点,它仍然支持 .container。
谢谢
你为什么不尝试更改你的 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) 以适合您的项目。