时间戳

首页 > 解决方案 > 使用 3 个断点设置媒体查询

bootstrap-4 - 使用 3 个断点设置媒体查询

问题描述

我正在将 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>

但是如何设置以解决我的业务需求？有人帮我吗？

标签： bootstrap-4responsive

解决方案

如果您不想修改引导源代码，您可以使用适当的媒体查询为这些断点创建自己的自定义列类。

.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>

推荐阅读