代码之家 › 专栏 › 技术社区 › 3gwebtrain

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

responsive bootstrap-4

0

3gwebtrain · 技术社区 · 7 年前

我正在使用引导程序来响应网站。根据业务需要,我只需要保持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 回复 | 直到 7 年前

1

0

hawkstrider 7 年前

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

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