Настройка медиа-запроса с 3 точками останова - PullRequest
Новая
       32

Настройка медиа-запроса с 3 точками останова

0 голосов
/ 23 января 2019

Я использую 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 Ответ

0 голосов
/ 23 января 2019

Если вы не хотите изменять исходный код начальной загрузки, вы можете создать собственный класс столбца для этих точек останова с соответствующими медиазапросами. 

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