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

Question

我正在使用 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>

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

Answer 1

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

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

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

Setting Media query with 3 break points

bootstrap-4

responsive