使用3个断点设置媒体查询
使用3个断点设置媒体查询
提问于 2019-01-23 20:36:44
我正在使用Bootstrap的响应式网站。根据业务需要，我只需要保持3个流畅的布局断点。如下所示：
1024px and above = 4 column
768px - 1024 px = 2 column
below 768px = 1 column目前，我的html是：
div.col-lg-3 {
border: 1px solid black;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>
</div>
</div>
但是如何设置来修复我的业务需求呢？有谁能帮我吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-23 21:39:06
如果您不想修改bootstrap源代码，您可以使用适当的媒体查询为这些断点创建自己的自定义列类。
.col-custom {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media(min-width: 768px) {
.col-custom {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
@media(min-width: 1024px){
.col-custom{
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-custom">1</div>
<div class="col-custom">2</div>
<div class="col-custom">3</div>
<div class="col-custom">4</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54327454
复制相关文章
相似问题
腾讯云开发者
