Czy konieczne jest dodanie selektora col-md w Bootstrap 3?

Question

Próbowałem szukać odpowiedzi na to bezskutecznie. Zasadniczo zastanawiam się, czy konieczne jest określenie wartości col-md- * w Bootstrap 3, czy można po prostu użyć, powiedzmy, col-xs-12 i col-sm- * i mieć col-sm - Wartość * dyktuje rozmiar kolumny aż do masywnego wyświetlacza.

Wydaje się, że to nie myślenia (że col-sm będzie w porządku), ale dokumentacja zawiera pozornie nadmiarowe wartości col-md- *, takie jak tutaj (zaczerpnięte z "Przykład: telefon komórkowy, tablet i Pulpit”pod«sieciowi»w sekcji CSS:.!

<div class="row"> 
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> 
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
    <div class="clearfix visible-xs"></div> 
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> 
</div> 

Wszelkie wyjaśnienia tutaj byłoby bardzo mile widziane Dzięki

Answer 1

Twoja intuicja jest poprawna, najniższa wartość ustawienia (XS, SM lub MD) będzie dyktuj dla większych rozmiarów ekranu, co oznacza, że ​​jeśli chcesz, aby twój div obejmował 4 kolumny zaczynając od małych urządzeń i do samego końca, musisz ustawić .col-sm-4.

To działa w ten sposób, ponieważ jak zapytania multimedialne są skonfigurowane:

/* Extra small devices (phones, up to 480px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-tablet) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-desktop) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-large-desktop) { ... } 

Jeśli nie przeciążonych, zajęcia dla małych urządzeń będą miały zastosowanie do większych ekranów, a także