Bootstrap 3 Grid System 中的偏移列是什么？

偏移：当我们的网页内容在可用设备宽度的完整视口宽度上可见时，它看起来很棒。但是在某些情况下，我们必须为它们周围的网页组件提供一些区域，以使它们看起来更棒。因此，为了实现这个目标，引导程序向我们介绍了偏移的概念。偏移是推动或移动网页上的对象以在它们周围提供空间的方式。

环境设置：我们需要将引导 CDN 链接添加到我们的 HTML 文档中，以使用列偏移：

为了实现偏移，我们使用 '.offset-n'类，其中'n'指定组件必须从其原始位置移动的宽度。

句法：

    //content of div tag
 

列偏移：列偏移用于将列从其原始位置移动或推动到指定的宽度或空间。为了实现列偏移，我们使用'.col-md-n'类和'.col-md-offset-n'类，它将列推n列。

句法：

    //content of div tag
 

示例 1：下面的示例演示了列偏移的使用：

HTML

  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    .green {
      color: green;
    }
  
  
  Column Offsetting

  

  
    
      Welcome to GFG
      
      
          
            Hey Geek!
            I'm a Offsetted column by four columns.
          
      
  
      
          
            Hey Geek!
            I'm a Offsetted column by three columns.
          
      
  
      
          
            Hey Geek!
            I'm a Offsetted column by two columns.
  
          
      
  
      
          
            Hey Geek!
            I'm a Offsetted column by one columns.
  
          
      
  
      
          
            Hey Geek!
            I'm a Normal column.
          
      
    
  

  

输出：

示例 2：

HTML

  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    .green {
        color: green;
    }
  
  
  Column Offsetting

  

  
    
      GeeksforGeeks 
      
        
          Hey Geek!
          I'm a normal columns.
  
        
  
        
          Hey Geek!
          I'm a Offsetted column by eight columns.
  
        
      
  
      
        
          Hey Geek!
          I'm a Offsetted column by four columns.
  
        
      
  
      
        
          Hey Geek!
          I'm a Normal column.
  
        
  
        
          Hey Geek!
          I'm a Offsetted column by eight columns.
  
        
      
    
  

  

输出：

优点：

• 它允许您根据需要轻松移动网页上的内容。
• 它为您的内容提供了灵活性。
• 它可以帮助您构建有吸引力的 UI 通过轻松安排网页上的内容。
• 您可以使用它轻松地将一行分成不同的部分。