📜  仅限 Bulma Container 宽屏或全高清

📅  最后修改于: 2022-05-13 01:56:13.069000             🧑  作者: Mango

仅限 Bulma Container 宽屏或全高清

Bulma是 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性,最大限度地减少了对响应行为的媒体查询的使用。

宽屏全高清容器类的帮助下,我们可以拥有全宽,直到出现任何断点。当我们想要在宽屏中,内容应该是全宽时,我们可以使用这些容器类修饰符来做到这一点。

容器类修饰符:

  • is-widescreen :这是使容器全宽直到宽屏断点的类(宽屏断点:1216px)
  • is-fullhd :这是使容器全宽直到 FullHD 断点的类(FullHD 断点:1408px)

句法:

示例 1:以下代码演示了is-widescreen修饰符。

HTML


  

    Bulma container widescreen
    

  

    

GeeksforGeeks

    Bulma container widescreen     
        
                      

GeeksforGeeks1

          

GeeksforGeeks2

          

GeeksforGeeks3

        
    


HTML


  

    Bulma container fullhd
    

  

    

GeeksforGeeks

    Bulma container fullhd     
        
                    

GeeksforGeeks1

          

GeeksforGeeks2

          

GeeksforGeeks3

        
    
  


输出:

示例 2:以下代码演示了is-fullhd修饰符。

HTML



  

    Bulma container fullhd
    

  

    

GeeksforGeeks

    Bulma container fullhd     
        
                    

GeeksforGeeks1

          

GeeksforGeeks2

          

GeeksforGeeks3

        
    
  

输出:

参考: https://bulma.io/documentation/layout/container/#widescreen-or-fullhd-only