twitter-bootstrap - thumbnail - tooltip html bootstrap

Bootstrap 4-cómo utilizar la mezcla de consulta de medios

Question

Cómo establecer un punto de interrupción del medio, digamos de mediano a grande, ¿debo anidar la mezcla mínima y la mezcla máxima o cómo hacerlo?

La salida que busco es algo como esto: @media (min-width: 480px) y (max-width: 767px) usando la mezcla de punto de interrupción.

Answer 1

Aquí también está la mezcla media-breakpoint-between($lower, $upper)

Así que esto debería funcionar

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}

Answer 2

Haces un combo de dos clases. (También BS4 usa rems ahora no px).

Ejemplo ... (De: http://codepen.io/j_holtslander/pen/jbEGWb )

<!-- Jay''s Viewport Helper -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
  <span class="hidden-sm-up">SIZE XS</span>
  <span class="hidden-xs-down hidden-md-up">SIZE SM</span>
  <span class="hidden-sm-down hidden-lg-up">SIZE MD</span>
  <span class="hidden-md-down hidden-xl-up">SIZE LG</span>
  <span class="hidden-lg-down">SIZE XL</span>
</div>
<!-- /Jay''s Viewport Helper -->

Answer 3

Utilice media-breakpoint-between($lower, $upper)

Dependencias

Los mixins se declaran en mixins/_breakpoints.scss y dependen del mapa $ grid-breakpoints, que se encuentra en _variables.scss .

Ejemplo

Mapa de punto de interrupción:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) 

Mezclar

@include media-breakpoint-between(sm, md) {
    // your code
}

Compila a

@media (min-width: 576px) and (max-width: 991px) {}

Noticia importante

El punto de interrupción del medio entre la mezcla usa valores "inferiores" y "superiores" del punto de interrupción declarado.

• El valor ''inferior'' del punto de interrupción es el valor declarado en $ grid-breakpoint map.

• El valor ''superior'' de punto de interrupción específico es igual al valor de punto de interrupción más alto menos 1px.

Ejemplo de valores de punto de interrupción superior e inferior (basado en el mapa de punto de interrupción de rejilla od $)

Lower value of md is equal to 576
Upper value of md is equal to 991 ( value of next breakpoint (lg) minus 1px (992px-1px)

Otras mezclas de medios

@include media-breakpoint-up(sm) {} crea un punto de interrupción con un ancho mínimo de $sm .

@include media-breakpoint-down(md) {} crea un punto de interrupción con un ancho máximo de $md .