Bulma 响应式对齐

Bulma 响应式对齐用于使您的网站具有响应性。您可以为每个视口宽度选择特定的对齐方式。只需将视口宽度附加到对齐修改器。

响应对齐类：

• has-text-left-mobile：该类用于在屏幕宽度达到 768px 时进行对齐。
• has-text-left-touch：如果屏幕宽度在 768px 到 1023px 之间，该类用于对齐。
• has-text-left-tablet-only：如果屏幕宽度在 769px 到 1023px 之间，则使用此类进行对齐。
• has-text-left-tablet：该类用于在屏幕宽度在 769px 到 1408px 及以上时进行对齐。
• has-text-left-desktop-only：如果屏幕宽度在 1024px 到 1215px 及以上，则使用此类进行对齐。
• has-text-left-desktop：如果屏幕宽度在 1024px 到 1408px 及以上，则该类用于对齐。
• has-text-left-widescreen-only：如果屏幕宽度在 1216px 到 1407px 及以上，则使用此类进行对齐。
• has-text-left-widescreen：如果屏幕宽度在 1216px 到 1408px 及以上，则该类用于对齐。
• has-text-left-fullhd：该类用于在屏幕宽度为 1408px 及以上时进行对齐。

注意：您可以对 4 个对齐方式中的每一个使用相同的逻辑，您必须更改左侧的边值，并且可以是左、右、对齐和居中的任何值。

示例：下面的示例说明了 Bulma 中的响应式对齐类

HTML

    
    

  

    

        GeeksforGeeks
    
    Bulma Responsive Alignment
    

    

        

           GeeksforGeeks
  
        

           GeeksforGeeks
  
        

           GeeksforGeeks
  
        

           GeeksforGeeks
  
        

           GeeksforGeeks
  
        

           GeeksforGeeks
  
        

           GeeksforGeeks
  
        

          GeeksforGeeks
  
        

          GeeksforGeeks
    

输出：

参考： https://bulma.io/documentation/helpers/typography-helpers/#responsive-alignment