Bootstrap教程

浅谈Bootstrap网格布局中怎么进行列排序和偏移

青灯夜游

Nov 18, 2021 pm 07:09 PM

bootstrap网格布局

本篇文章带大家一起了解一下Bootstrap网格布局中网格列的排序与偏移问题，看看网格列如何排序和偏移，希望对大家有所帮助！

浅谈Bootstrap网格布局中怎么进行列排序和偏移

1、列的排序

1.1 列的重排序示例

有时候出于某种原因（例如SEO），我们需要显示的视觉效果和源码中显示的先后顺寻不一样，比如说网页分左右两部分，我们需要左边是导航，右边是最新文章列表，但是出于seo原因，我们想让搜索引擎的蜘蛛首先获取的是最新文章列表，这时候我们就需要列的重排序。【相关推荐：《bootstrap教程》】

当然，你或许还有其他的原因促使你这样做。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col-9 order-2">
                <h5 id="最新文章列表">最新文章列表</h5>
                <ol>
                    <li>文章标题 作者 发布日期</li>
                    <li>文章标题 作者 发布日期</li>
                    <li>文章标题 作者 发布日期</li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="col-3 order-1">
               <h5 id="站点导航">站点导航</h5>
               <ul>
                   <li>随手记</li>
                   <li>心情点滴</li>
                   <li>职场人士</li>
               </ul>
            </div>
        </div>
    </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

浅谈Bootstrap网格布局中怎么进行列排序和偏移

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

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        .col {height: 50px; border: 1px solid #000;}
        h5{text-align: center;}
    </style>
    <title>网格行列演示</title>
</head>
<body>
    <h5 id="默认顺序">默认顺序</h5>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
        </div>
    </div>
    <h5 id="使用数字调整顺序">使用数字调整顺序</h5>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col order-1">2 order-1</div>
            <div class="col order-5">3 order-5</div>
            <div class="col order--1">4 order--1</div>
            <div class="col order-6">5 order-6</div>
            <div class="col order-0">6 order-0</div>
            <div class="col order-4">7 order-4</div>
            <div class="col">8</div>
        </div>
    </div>

    <h5 id="使用单词调整顺序">使用单词调整顺序</h5>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col order-last">2 order-last</div>
            <div class="col">3</div>
            <div class="col order-first">4 order-first</div>
            <div class="col order-first">5 order-first</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
        </div>
    </div>

    <h5 id="数字和单词调整顺序">数字和单词调整顺序</h5>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col order-last">2 order-last</div>
            <div class="col order-5">3 order-5</div>
            <div class="col  order-3">4  order-3</div>
            <div class="col order-first">5 order-first</div>
            <div class="col  order-2">6  order-2</div>
            <div class="col  order-1">7  order-1</div>
            <div class="col">8</div>
        </div>
    </div>

    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>

</html>

具体效果

浅谈Bootstrap网格布局中怎么进行列排序和偏移

1.2 使用数字排序

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

第一个表格是未使用排序的情况，直接按顺序排序。
使用了1-5之外的数字，不起任何作用，还是按照它本来的顺序显示，如原4、5、6列。
使用数字的列排在未使用排序的列后面，按照排序数字从小到大排序
排序数字无需按顺序使用，例如上例中就没有使用2、3。

1.3 使用单词排序

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

2、列的偏移

2.1 使用.offset-类

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

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

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}
        h5{text-align: center;}
    </style>
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">2</div>
            <div class="col-md-1">3</div>
            <div class="col-md-1">4</div>
            <div class="col-md-1">5</div>
            <div class="col-md-1">6</div>
            <div class="col-md-1">7</div>
            <div class="col-md-1">8</div>
            <div class="col-md-1">9</div>
            <div class="col-md-1">10</div>
            <div class="col-md-1">11</div>
            <div class="col-md-1">12</div>
            </div>
        <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
        </div>

        <div class="row">
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        </div>        
        
        <div class="row">
        <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
        </div>
    </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

显示结果如下

浅谈Bootstrap网格布局中怎么进行列排序和偏移

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

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

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}
        h5{text-align: center;}
    </style>
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row row-cols-12">
            <div class="col-1">1</div>
            <div class="col-1">2</div>
            <div class="col-1">3</div>
            <div class="col-1">4</div>
            <div class="col-1">5</div>
            <div class="col-1">6</div>
            <div class="col-1">7</div>
            <div class="col-1">8</div>
            <div class="col-1">9</div>
            <div class="col-1">10</div>
            <div class="col-1">11</div>
            <div class="col-1">12</div>
         </div>

         <div class="row">
            <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
            <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
            </div>
            <div class="row">
            <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
            <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
            </div>
    </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

响应式效果动画

浅谈Bootstrap网格布局中怎么进行列排序和偏移

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

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

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}

        h5{text-align: center;}
    </style>
    <title>列的排序</title>
</head>
<body>
    <div class="container">

        <div class="row row-cols-12">
            <div class="col-1">1</div>
            <div class="col-1">2</div>
            <div class="col-1">3</div>
            <div class="col-1">4</div>
            <div class="col-1">5</div>
            <div class="col-1">6</div>
            <div class="col-1">7</div>
            <div class="col-1">8</div>
            <div class="col-1">9</div>
            <div class="col-1">10</div>
            <div class="col-1">11</div>
            <div class="col-1">12</div>
         </div>
         <h5 id="后面只有自己">后面只有自己</h5>
         <div class="row">
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
         </div>
         <h5 id="不需要换行">不需要换行</h5>
         <div class="row">
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
             </div>

         <h5 id="需要换行">需要换行</h5>
         <div class="row">
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            </div>
         
            <h5 id="后面只有自己">后面只有自己</h5>
            <div class="row">
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2 me-auto">.col-md-2 .me-auto</div>
            </div>
            <h5 id="不需要换行">不需要换行</h5>
            <div class="row">
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2 me-auto">.col-md-2 .me-auto</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
                </div>
   
            <h5 id="需要换行">需要换行</h5>
            <div class="row">
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2 me-auto">.col-md-2 .me-auto</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               </div>
      
        </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

显示效果

浅谈Bootstrap网格布局中怎么进行列排序和偏移

这两个参数都是在所在的行不满行的情况下有效（即所在行栅格数相加小于12），如果正好满行，则参数无效。
.ms-auto：通过添加一个左边距来使自己及自己右侧的列靠右对齐。
.me-auto：通过添加一个右边距来使自己右侧的列（不含自己）靠右对齐。

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

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

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}

        h5{text-align: center;}
    </style>
    <title>列的偏移</title>
</head>
<body>
    <div class="container">
               <h5 id="每个栅格是-的时候">每个栅格是5的时候</h5>
            <div class="row">
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5 ms-auto">.col-md-5 .ms-auto</div>
               <div class="col-md-5 ms-auto">.col-md-5 .ms-auto</div>
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5 me-auto">.col-md-5 me-auto</div>
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5 me-auto">.col-md-5 me-auto</div>

               </div>
      
        </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

显示效果

浅谈Bootstrap网格布局中怎么进行列排序和偏移

3 独立列类

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

<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>

浅谈Bootstrap网格布局中怎么进行列排序和偏移

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

<div class="clearfix">
<img class="col-md-6 float-md-end mb-3 ms-md-3 lazy"  src="/static/imghwm/default1.png"  data-src="..."    alt="...">

<p>
A paragraph of placeholder text. We&#39;re using it here to show the use of the clearfix class. We&#39;re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>

<p>
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.
</p>

<p>
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&#39;s none of that here.
</p>
</div>

浅谈Bootstrap网格布局中怎么进行列排序和偏移

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上是浅谈Bootstrap网格布局中怎么进行列排序和偏移的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：掘金社区。如有侵权，请联系admin@php.cn删除

React和Bootstrap：理想的组合？May 01, 2025 am 12:01 AM

React和Bootstrap是理想的搭配。1)使用Bootstrap的CSS类和JavaScript组件，2)通过React-Bootstrap或reactstrap集成，3)按需加载和优化渲染性能，可以构建高效美观的用户界面。

使用Bootstrap：创建现代和移动优先的网站Apr 30, 2025 am 12:08 AM

Bootstrap是用于创建现代化、响应式、且用户友好的网站的开源前端框架。1)它提供网格系统和预定义样式，简化布局和开发。2)移动优先设计确保兼容性和性能。3)通过自定义样式和组件，网站可个性化。4)性能优化和最佳实践包括选择性加载和响应式图像。5)常见错误如布局问题和样式冲突可通过调试技巧解决。

Bootstrap和Web设计：最佳实践和技术Apr 29, 2025 am 12:15 AM

Bootstrap是由Twitter开发的开源前端框架，适合快速构建响应式网站。1)它的网格系统基于12列结构，允许创建灵活的布局。2)响应式设计功能使网站适应不同设备。3)基本用法包括构建导航栏，高级用法涉及卡片组件。4)常见错误如网格系统误用可通过正确设置列宽避免。5)性能优化包括只加载必要组件、使用CDN和文件压缩。6)最佳实践强调代码整洁、自定义样式和响应式设计。

Bootstrap和React：结合Web开发框架Apr 28, 2025 am 12:08 AM

结合Bootstrap和React的原因是它们的互补性：1.Bootstrap提供预定义的样式和组件，简化UI设计；2.React通过组件化开发和虚拟DOM提升效率和性能。结合使用可以享受快速UI构建和复杂交互管理。

从零到bootstrap：快速入门Apr 27, 2025 am 12:07 AM

Bootstrap是一个基于HTML、CSS和JavaScript的开源前端框架，旨在帮助开发者快速构建响应式网站。它的设计理念是“移动优先”，提供了丰富的预定义组件和工具，如网格系统、按钮、表单、导航栏等，简化前端开发过程，提高开发效率，并确保网站的响应性和一致性。使用Bootstrap可以从一个简单的页面开始，逐步添加高级组件如卡片和模态框，优化性能的最佳实践包括自定义Bootstrap、使用CDN和避免过度使用类名。

React和Bootstrap：增强用户界面设计Apr 26, 2025 am 12:18 AM

React和Bootstrap可以无缝集成来提升用户界面设计。1)安装依赖包：npminstallbootstrapreact-bootstrap。2)导入CSS文件：import'bootstrap/dist/css/bootstrap.min.css'。3)使用Bootstrap组件，如按钮和导航栏。通过这种结合，开发者可以利用React的灵活性和Bootstrap的样式库，创建美观且高效的用户界面。

将引导程序集成到React：实用指南Apr 25, 2025 am 12:04 AM

将Bootstrap集成到React项目中的步骤包括：1.安装Bootstrap包，2.导入CSS文件，3.使用Bootstrap类名样式化元素，4.使用React-Bootstrap或reactstrap库来使用Bootstrap的JavaScript组件。这种集成利用React的组件化和Bootstrap的样式系统，实现高效的UI开发。

Bootstrap是用什么？一个实用的解释Apr 24, 2025 am 12:16 AM

bootstrapisapowerfulflameworkthatsimplifiesCreatingingResponsive，移动 - firstwebsites.itoffers.itoffers：1）AgridSystemforadaptableBableLayouts，2）2）pre-styledlementslikeButtonslikeButtonSandForms和3）JavaScriptCompriptcomponcomponentsSuchcaroSelSuselforEnhanceSuch forenhanceTinteractivity。

See all articles