Bootstrap:列偏移和列排序

最新推荐文章于 2024-09-13 18:29:35 发布

鸣_c

最新推荐文章于 2024-09-13 18:29:35 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/C_755028787/article/details/105938763

版权

本文介绍了Bootstrap框架中列偏移和列排序的使用方法。列偏移通过.col-md-offset-*类实现，允许元素向右侧偏移指定列数。而列排序则利用.col-md-push-*和.col-md-pull-*类改变列的顺序，不影响后续元素布局。文中通过实例展示了这两种技术的应用和区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列偏移：

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
*取值范围为~12.

实例：

<!-- 初始结构 -->
<div class="container">
        <div class="row">
            <div class="col-md-2">2</div>
            <div class="col-md-4">6</div>
        </div>
        <div class="row">
            <div class="col-md-2">md2</div>
            <div class="col-md-1">md1</div>
        </div>
    </div>

效果：
在这里插入图片描述
对列进行偏移

 <div class="container">
        <div class="row">
            <!-- col-md-offset-1向右移动两格 影响后续元素 -->
            <div class="col-md-2 col-lg-offset-2">2</div>
            <div class="col-md-4">4</div>
        </div>
        <div class="row">
            <!-- 向右偏移一格 影响后续元素 -->
            <div class="col-md-2 col-lg-offset-1">md2</div>
            <!-- 向右偏移4格 影响后续元素 -->
            <div class="col-md-1 col-lg-offset-4">md1</div>
        </div>
    </div>

偏移后的效果如下：
在这里插入图片描述

列排序：

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
取值区间为为1~12。
col-md-push- 将元素向右推个列的宽度
col-md-pull- 将元素向左拉*个列的宽度

实例：
使用col-md-push-* 和 .col-md-pull-*实现列表在中等屏幕(电脑桌面)时错列显示，小于中等屏幕时按顺序堆叠显示

<body>
    <div class="container bg">
       <div class="row">
           <div class="col-md-4 bgMD4 hidden-md">MD-4</div>
           <div class="col-md-8 bgMD8">MD-8</div>
       </div>
       <div class="row">
           <!-- 只有在md尺寸的屏幕下，MD-4和MD—8交换出现的位置 -->
           <div class="col-md-4  bgMD4 col-md-push-8">MD-4</div>
           <div class="col-md-8 bgMD8 col-md-pull-4">MD-8</div>
       </div>
   
   </div>

中等屏幕时的显示效果：
在这里插入图片描述
当视口尺寸小于中等屏幕时：
显示效果为