Pregunta Bootstrap 3.0 consultas de medios


Estoy trabajando en un pequeño proyecto basado en Boostrap 3 (compilación personalizada html5boilerplate) e intento utilizar las consultas de medios "oficiales" en la documentación boostrap:

/* 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-sm) { ... }

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

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

Por alguna razón, las consultas de medios no parecen existir (@ screen-sm, screen-md, screen-lg), estoy buscando esto en los archivos bootstrap pero no puedo encontrar ninguna referencia.

Mi código de ejemplo (main.css):

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

    .header-btn {display: none;}

}

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

    .slogan {display: none;}
}

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

Básicamente lo que sucede es ... ¡nada!

Obtengo esos errores en Chrome: http://i.solidfiles.net/0dce2d2a7.png

¿Algunas ideas?


19
2017-09-13 23:03


origen


Respuestas:


La documentación del bootstrap es un poco confusa.

Usando estos @... parámetros para min-ancho es de hecho Menos sintaxis, no CSS.

Debieras utiliza la utilidad de personalización en Bootstrap (ver Media consulta puntos de interrupción) para configurar lo que quiere estos screen-xxx parámetros a ser (por ejemplo, establecer screen-sm para que sea 768px).

Y luego, cuando haga clic en el botón Compilar en la parte inferior, se compilará menos código en CSS. esta compilación reemplazará todas las ocurrencias de @ screen-sm con 768px, y lo mismo para los demás parámetros.


21
2017-09-14 20:16



@adonbajrami: creo que debes agregar @import "myStyle.less" en la parte inferior de la bootstrap.less archivo.

El archivo bootstrap.less importaciones variables.less. Incluir su archivo en el mismo archivo principal dará su archivo myStyle.less acceso a las variables declaradas en variables.less.

(Perdón por no comentar en el lugar, pero aún no puedo hacerlo).


1
2017-11-27 14:52