Bootstrap列排序
Posted zzjeny
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap列排序相关的知识，希望对你有一定的参考价值。
Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML标准模板</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" > <script src="js/bootstrap.min.js" rel="stylesheet"></script> <script src="js/jquery-2.2.4.min.js"></script> </head> <body style="padding:50px;background-color:#ccc;"> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <p>排序前</p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div><br> <div class="row"> <p>排序后</p> <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div> </div> </body> </html>
以上是关于Bootstrap列排序的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 中的列排序，带有推/拉和 col-md-12
Bootstrap Table按照data-formatter的结果排序怎么设置
如果使用格式化程序进行显示，如何在 bootstrap-vue 中对日期列进行排序？
ASP.net Razor 应用程序：使用 Bootstrap、CSS 或 JS，是不是有一种简单的方法可以左右移动整个表格列？即时重新排序列