Как на самом деле реализовано масштабирование в классах сетки начальной загрузки - PullRequest
Новая
       13

Как на самом деле реализовано масштабирование в классах сетки начальной загрузки

0 голосов
/ 29 сентября 2019

что я имею в виду под этим: в начальной загрузке 4 (и других версиях, я верю, но 4 - это то, что я изучаю) сеточная система "Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm,вам нужно только указать xs "-квотированный из w3hools-

, так как это на самом деле реализовано в файле bootstrap.css, например, какие правила CSS используются для применения этого трюка, потому что когда вы смотрите на bootstrap-gridВ файле .css вы видите, что каждый класс сетки имеет разные максимальные правила для разных медиа-запросов 

@media (min-width: 576px) {
.col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
}
@media (min-width: 768px) {
  .col-md-1 { .col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
}

, поэтому, когда вы указываете class = "col-sm-1" для вашего контента и открываете страницу вУстройство «md» не должно содержать содержимое всех 12 столбцов, поскольку не был указан класс md, а условие для медиазапроса sm не было выполнено, так что его следует игнорировать, но в действительности содержимое будет по-прежнему занимать только 1 столбец.

...