<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: blue">
Content C
</div>
<div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: pink">
Content D
</div>
<div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple" >
Content A
</div>
<div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple">
Content B
</div>
</div>
</div>
</body>
所以我试图在chrome上实现以下显示。它完美适用于野生动物园。
Desktop:
[ 1st col ][ 2nd col ][ 3rd col ][ 4th col ]
Mobile:
[ 3rd col ]
[ 4th col ]
[ 1st col ]
[ 2nd col ]
我的语法错了还是我应该包含一些额外的步骤。我尝试在每一行添加col-xs-4 col-sm-4 col-md-4,但这似乎没有帮助或伤害。
所以我认为真正的问题是bootstrap不会在chrome上呈现给我。在safari上它显示为link。在Chrome上,它显示为link。 谢谢你的帮助!
答案 0 :(得分:2)
是的,因为你没有添加最多12列
如果你想让它看起来像你的图表,你可以把这个类
<div class="col col-lg-3 col-sm-12"></div>
如果没有为较小的屏幕宽度指定,你可能甚至不需要col-sm-12 bootstrap会自动使每列的全宽
链接到jsfiddle,例如http://jsfiddle.net/tw1gqocq/1/
更新:::: 这是为了获得正确的订购。 并且bootstrap cdn应该以https://
开头
<div class="container-fluid">
<div class="row">
<div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: purple" >
Content 3rd
</div>
<div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: green">
Content 4th
</div>
<div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: blue">
Content 1st
</div>
<div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: pink">
Content 2nd
</div>
</div>
</div>