目前暂时实现效果，容后面整理心得，先贴上源代码。
<!DOCTYPE html>
<html>
<head>
<title>demo bootstrap</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<!-- <script type="text/javascript" src="dist/js/bootstrap.js"></script> -->
<style type="text/css">
.my-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.my-container {
width: 750px;
}
}
@media (min-width: 992px) {
.my-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.my-container {
width: 1170px;
}
}
/*用于清除网格浮动造成的影响*/
.my-row:before,
.my-row:after {
display: table;
content: " ";
}
.my-row:after {
clear: both;
}
.my-row {
margin-right: -15px;
margin-left: -15px;
}
.my-col-lg-4,
.my-col-md-6,
.my-xs-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
/*----*/
float: left;
}
@media (min-width:768px) {
.my-xs-12 {
width: 100%;
}
.my-col-xs-12:after {
display: block;
content: ‘after my-col-xs-12 min-width: 768px‘;
color: red
}
.my-col-xs-12:before {
display: block;
content: ‘before my-col-xs-12 min-width: 768px‘;
color: red
}
}
@media (min-width: 992px) {
.my-col-md-6 {
width: 50%;
}
.my-col-md-6:after {
display: block;
content: ‘after col-md-6 min-width: 992px‘;
color: red
}
.my-col-md-6:before {
display: block;
content: ‘before col-md-6 min-width: 992px‘;
color: red
}
}
@media (min-width: 1200px) {
.my-col-lg-4 {
width: 33.3333333%;
}
.my-col-lg-4:after {
display: block;
content: ‘after col-lg-4 min-width: 1200px‘;
color: yellow
}
.my-col-lg-4:before {
display: block;
content: ‘before col-lg-4 min-width: 1200px‘;
color: yellow
}
}
</style>
</head>
<body style="background-color: #eee">
<div class="container" style="background-color: #aaa;padding: 15px;">
<div class="row" style="background-color: #bbb;padding: 15px;">
<div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div>
<div class="col-lg-4 col-md-6" style="height: 300px;background-color: #fff"></div>
<div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div>
</div>
</div>
<div class="my-container" style="background-color: #aaa;padding: 15px;">
<div class="my-row" style="background-color: #bbb;padding: 15px;">
<div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000">X</div>
<div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #fff"></div>
<div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000"></div>
</div>
</div>
</body>
</html>
效果图：
width>1200px:
width:1200-992px:
width:0-768px:
时间： 2024-10-05 15:21:06