bootstrap栅格系统在屏幕变窄时，默认是从右边先掉下来的，但是如果想让左边的先掉下来该怎么办呢？
我们可以让每一个div在结构上颠倒过来，但是视图上是正常的，那么就可以实现左边先掉下来了。
如1、2、3、4这4个div，本来是4先掉下来，后来掉3，掉2，现在是想1先掉，后来掉2，掉3
怎么来做呢？
原先是1、2、3、4的排序，在html代码中，可以先变成4、3、2、1的排序，这时视图上也就变成了4、3、2、1的排序。视图上怎么样改变呢？将1用col-lg-pull-9 的方式将1拽到原来的位置上，将4用col-lg-push-9将4拽到原来的位置上.
大概就是用pull、push来实现拖拽，pull是向左拽，push是向右拽。
具体代码和图的实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap练习</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
div[class|=col]{
height: 100px;
}
#one{
background-color: blue;
}
#two{
background-color: rgb(10, 10, 11);
}
#three{
background-color: rgb(184, 20, 184);
}
#four{
background-color: rgb(28, 182, 28);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3" id="one">
<h1>1</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" id="two">
<h1>2</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" id="three">
<h1>3</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" id="four">
<h1>4</h1>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
这段代码实现下来，视图如下：
如果想要实现1先掉下来，则将1、2、3、4的div顺序换成4、3、2、1，即将html代码的顺序反过来排，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap练习</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
div[class|=col]{
height: 100px;
}
#one{
background-color: blue;
}
#two{
background-color: rgb(10, 10, 11);
}
#three{
background-color: rgb(184, 20, 184);
}
#four{
background-color: rgb(28, 182, 28);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3" id="four">
<h1>4</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" id="three">
<h1>3</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" id="two">
<h1>2</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" id="one">
<h1>1</h1>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
视图如下：
但是现在视图上要将4、3、2、1的顺序换成1、2、3、4
现在是最大尺寸的视图下，要将1和4的位置对调，1左偏9格，4右偏9格,2和3对调，2左偏3格，3右偏3格，此时在最大屏幕时，视图上就变成了1、2、3、4的视图样子，但是实际结构上是4、3、2、1，所以当页面变窄成md时，1会先掉下来。
则
<div class="col-sm-6 col-md-4 col-lg-3 col-lg-push-9" id="four">
<h1>4</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-lg-push-3" id="three">
<h1>3</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-lg-pull-3" id="two">
<h1>2</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-lg-pull-9" id="one">
<h1>1</h1>
</div>
经过上面的操作，当页面变窄时，页面就变成了下图的样子：
这时页面视图上4、3、2的顺序应该改成2、3、4，2和4应该对调，2左移8格，4右移8格，3不偏移也要写成col-md-pull-0，这点很重要哦~否则后面会出错。具体添加下面几行代码：
代码码好后，将屏幕再缩小，变成如图模式，如下图：
我们需要将4和3的位置对调，将3左移6格，4右移6格，新增如下图的代码：
就这样就完成了，最后代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap练习</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
div[class|=col]{
height: 100px;
}
#one{
background-color: blue;
}
#two{
background-color: rgb(10, 10, 11);
}
#three{
background-color: rgb(184, 20, 184);
}
#four{
background-color: rgb(28, 182, 28);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-8 col-lg-3 col-lg-push-9" id="four">
<h1>4</h1>
</div>
<div class="col-sm-6 col-sm-pull-6 col-md-4 col-lg-3 col-md-pull-0 col-lg-push-3" id="three">
<h1>3</h1>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-3" id="two">
<h1>2</h1>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-lg-pull-9" id="one">
<h1>1</h1>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
网友评论