twitter-bootstrap - thumbnail - tooltip html bootstrap
Bootstrap 4-cómo utilizar la mezcla de consulta de medios (3)
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
}
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.
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 -->
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 .