个人中心
我的认证
我的课程
bootstrap4.0没法实现col-xs-6的功能， 切回3.3才生效 不知道为啥
bootstrap4.0没法实现col-xs-6的功能， 切回3.3才生效 不知道为啥
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="with=device-with,initial-scale=1"> <title>Title</title> <link href="bootstrap.min.css" rel="stylesheet"> <style> .row{ margin-bottom: 20px; } .row.row { margin-top: 15px; margin-bottom: 0px; } [class*="col-"]{ padding-top: 15px; padding-bottom: 15px; background-color:#eeeeee ; border:1px solid #dddddd; background-color: rgba(86,61,124,15); border: 1px solid rgba(86,61,124,0.2); } </style> </head> <body> <!--栅格系统学习--> <div class="container"> <div class="row"> <!--<div class="col-md-4 col-sm-5 col-xs-6"> col-mad4 </div> --> <!--列偏移--> <!--<div class="col-md-8 col-sm-7 col-xs-6 col-md-offset-3"> col-mad8 </div> --> <!--嵌套列--> <!-- <div class="col-md-9"> col-md-9 <div class="row"> <div class="col-md-8 col-md-offset-1">col-md-8</div> </div> </div>--> <!-- 列排序--> <div class="col-md-9 col-md-push-3">col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>全局css样式栅格系统</title>
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
background-color: rgba(86,61,124,0.5);
border: 1px solid rgba(86,61,124,0.2);
}
</style>
</head>
<body>
<div class="container"><!--容器-->
<div class="row"><!--栅格系统一共12份，加起来不超过12份就可以-->
<div class="col-md-4 col-xs-6">col-md-4</div>
<div class="col-md-8 col-xs-6">col-md-8</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12">col-md-4</div>
<div class="col-md-8 col-sm-7 col-xs-6">col-md-8</div>
<!--随着屏幕大小变化显示栅栏数-->
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12">col-md-4,col-md-4,
col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,</div><!--超出部分会另起一行显示，只增加高度，不增加宽度-->
<div class="col-md-8 col-xs-6 col-md-offset-4">col-md-8</div>
<!--语法使用 .col-md-offset-* 类可以将列向右侧偏移。-->
</div>
<!--行的嵌套，同样总数不超过12，没必要占满-->
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-5 col-md-offset-1">
col-md-8
</div>
</div>
</div>
</div>
<!--通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
push相当于在前面增加*个空位，pull相当于在后面增加*个空位，两者可以重叠
-->
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
</div>
</body>
</html>
