Как CSS в Bootstrap 3 заставляет точку останова xs начинаться с вертикально сложенных div? - PullRequest
Новая
       15

Как CSS в Bootstrap 3 заставляет точку останова xs начинаться с вертикально сложенных div?

0 голосов
/ 26 апреля 2018

Я не понимаю, почему при использовании точки останова xs элементы div будут вертикальными, а не горизонтальными. Когда я смотрю на Bootstrap 3, у меня есть: 

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

Что заставляет его начинать вертикально?

Bootstrap 4 не имеет хз, поэтому я посмотрел на см. Это flexbox, но я не вижу flex-direction в этих селекторах. Как он знает, чтобы идти по вертикали?

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

1 Ответ

0 голосов
/ 26 апреля 2018

Я давно не использовал bootstrap, но основной принцип заключается в том, что медиа-запрос обрабатывает это. Код, который специально это делает, может быть что-то вроде этого ... 

/******** The maximum size the XS columns will stay vertical *****/
@media only screen and (max-width: 800px) {
   .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5,
   .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10
   .col-xs-11, .col-xs-12 {
         width:100%;
   }
}

Пока область просмотра меньше 800 пикселей, все столбцы xs будут иметь ширину 100%. Все, что связано с этим и его стилями по умолчанию, представленными в вашем исходном вопросе, вступит во владение, и они снова будут горизонтальными, а не вертикальными.

Обновление

Теперь мне просто любопытно, поэтому не против взглянуть на это. Так что это из BS4 CSS ... 

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
 }

Так что это размер по умолчанию для каждого столбца. Каждый из них настроен на 100%, поэтому он складывается, когда медиа-запрос не действует.

Теперь для первого набора столбцов они использовали этот медиазапрос 

@media (min-width: 576px) {
     .col-sm {
       -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
       max-width: 100%;
     }
  /*** followed by all the other -sm column sizes ***/
 }

Если бы они делали это для каждого размера столбца при увеличении области просмотра, это объясняло бы, почему при небольшом размере они выглядят как 100% и вертикально сложены, несмотря на отсутствие явного запроса для этого. Это все оригинальные правила CSS, которые сделали это.

...