这是我的 html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 div1">DIV1</div>
<div class="col-sm-6 div2">DIV2</div>
<div class="col-sm-6 div3">DIV3</div>
<div class="col-sm-6 div4">DIV4</div>
</div>
</div>
这是我的CSS:
.row div{
height: 100px;
}
.div1{
background: blue;
}
.div2{
background: red;
}
.div3{
background: darkcyan;
}
.div4{
background: cyan;
}
最佳答案
您可以使用移动媒体查询交换 div3
和 div4
的颜色 min-width: 767px
.row div{
height: 100px;
}
.div1{
background: blue;
}
.div2{
background: red;
}
.div3{
background: darkcyan;
}
.div4{
background: cyan;
}
@media(max-width:767px){
.div3{
background: cyan;
}
.div4{
background: darkcyan;
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 div1"></div>
<div class="col-sm-6 div2"></div>
<div class="col-sm-6 div3"></div>
<div class="col-sm-6 div4"></div>
</div>
</div>
关于css - Bootstrap 连续改变子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39569811/