Bootstrap网格布局中如何进行列排序和偏移

**是不是很神奇，接下来我再给出另一个例子，来详细介绍一下排序规则。 **

    
    
    
    
    
    
    


    
默认顺序
    
        
            1
            2
            3
            4
            5
            6
            7
            8
        
    
    
使用数字调整顺序
    
        
            1
            2 order-1
            3 order-5
            4 order--1
            5 order-6
            6 order-0
            7 order-4
            8
        
    

    
使用单词调整顺序
    
        
            1
            2 order-last
            3
            4 order-first
            5 order-first
            6
            7
            8
        
    

    
数字和单词调整顺序
    
        
            1
            2 order-last
            3 order-5
            4  order-3
            5 order-first
            6  order-2
            7  order-1
            8
        
    

    

具体效果

1.2 使用数字排序

使用order-*类控制内容的视觉顺序，其中*为数字1-5，非常抱歉就支持这五个数字，如果你用其他的数字，会不起作用，根据上面的示例表可以看到：

• 第一个表格是未使用排序的情况，直接按顺序排序。

• 使用了1-5之外的数字，不起任何作用，还是按照它本来的顺序显示，如原4、5、6列。

• 使用数字的列排在未使用排序的列后面，按照排序数字从小到大排序

• 排序数字无需按顺序使用，例如上例中就没有使用2、3。

1.3 使用单词排序

是用单词排序很简单，就两个类order-first和.order-last，分别表示开始和最后，从示例中可以看出，单词排序可以和数字排序一起，单词排序优先级高于数字和默认排序。

2、列的偏移

2.1 使用.offset-类

使用offset-md-*类使列向右移动*个栅格，这些类是通过将列的左边距增加*栅格来实现的。 偏移列后面的其他列以偏移列为新的开始点排列。

下面还是用代码来演示以下：

    
    
    
    
    
    
    


    
        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            
        
        .col-md-4
        .col-md-4 .offset-md-4
        

        
        .col-md-3 .offset-md-3
        .col-md-3 .offset-md-3
                
        
        
        .col-md-6 .offset-md-3
        
    
  
    

显示结果如下

2.2 .offset-类支持响应式布局

.offset-类同样支持响应式布局，下面是一个示例，大家可以自己查看效果，加深理解。

    
    
    
    
    
    
    


    
        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
         

         
            .col-sm-5 .col-md-6
            .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
            
            
            .col-sm-6 .col-md-5 .col-lg-6
            .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
            
    
  
    

响应式效果动画

2.3 使用.外边距实用类实现偏移

这部分的详细介绍在《bootstrap5中文手册》实用类中的自动边距有详细介绍。 这部分内容，手册讲的也不是很清楚，下面还是用代码来演示一下，然后再详细解释一下：

    
    
    
    
    
    
    


    

        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
         
         
后面只有自己
         
            .col-md-2
            .col-md-2 .ms-auto
         
         
不需要换行
         
            .col-md-2
            .col-md-2 .ms-auto
            .col-md-2
            .col-md-2
             

         
需要换行
         
            .col-md-2
            .col-md-2 .ms-auto
            .col-md-2
            .col-md-2
            .col-md-2
            .col-md-2
            .col-md-2
            .col-md-2
            .col-md-2
            
         
            
后面只有自己
            
               .col-md-2
               .col-md-2 .me-auto
            
            
不需要换行
            
               .col-md-2
               .col-md-2 .me-auto
               .col-md-2
               .col-md-2
                
   
            
需要换行
            
               .col-md-2
               .col-md-2 .me-auto
               .col-md-2
               .col-md-2
               .col-md-2
               .col-md-2
               .col-md-2
               .col-md-2
               .col-md-2
               
      
        
  
    

显示效果

• 这两个参数都是在所在的行不满行的情况下有效（即所在行栅格数相加小于12），如果正好满行，则参数无效。

• .ms-auto：通过添加一个左边距来使自己及自己右侧的列靠右对齐。

• .me-auto：通过添加一个右边距来使自己右侧的列（不含自己）靠右对齐。

说起来有些拗口，其实简单说就是ms-auto通过在自己左边添加间隔来实现满行。 me-auto通过在自己右边添加间隔来实现满行，如果正好满行就算了。

那我们再用一个例子来验证一下：

    
    
    
    
    
    
    


    
               
每个栅格是5的时候
            
               .col-md-5
               .col-md-5 .ms-auto
               .col-md-5 .ms-auto
               .col-md-5
               .col-md-5 me-auto
               .col-md-5
               .col-md-5
               .col-md-5 me-auto

               
      
        
  
    

显示效果

3 独立列类

.col-*类也可以在 .row外部使用，为元素提供特定的宽度。当列类用作行的非直接子级时，将忽略填充。这部分内容我就不演示了，直接把手册内容搬过来，有兴趣的朋友可以多试一下。

.col-3: width of 25%


.col-sm-9: width of 75% above sm breakpoint

这些类可以与实用程序一起使用来创建响应的浮动图像。如果文本较短，请确保将内容包装在.clearfix包装器中以清除浮动。

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.



As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.



And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

看完了这篇文章，相信你对“Bootstrap网格布局中如何进行列排序和偏移”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！