如何使自举容器在古腾堡alignfull

时间:2018-11-20 15:25:40

标签: css bootstrap-4 wordpress-gutenberg gutenberg-blocks

我做了gutenburg .alignfull课

import sys
try:
    strseta = sys.argv[1]
    lista = [int(x) for x in strseta.split(',')]
    strsetb = sys.argv[2]
    listb = [int(x) for x in strsetb.split(',')]
    print("Set A:" ,  strseta.split(','))
    print("Set B:" ,  strsetb.split(','))
    out3 = []
    for i in listb:
        if i in lista:
            out3.append(i)
            print("Intersection of A and B:", out3.split())
    out4 = list(seta)
    for j in listb:
        if j not in lista:
            out4.append(j)
            print("Union of A and B:", out4.split(','))
    out5 = []
    for k in lista:
        if k not in listb:
            out5.append(k)
            print("Difference of A and B:", out5.split(','))

except:
    print("Your input is invalid!")  

哪个效果很好。

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

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

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

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

所以我的内容正好贴在墙上,而不是像一个好的引导容器那样填充。

有人知道这个解决方法吗?


我尝试了不同的CSS

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

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

谢谢

1 个答案:

答案 0 :(得分: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)以适合您的项目。