¿Cuál es el método correcto para usar consultas de medios CSS para crear un sitio receptivo con Bootstrap?

• Use .container .row> .col-xx-xx para crear columnas y secciones. Si una sección es de ancho completo, use col-md-12 independientemente. Esto puede crear una sopa div pero garantizará que todo funcione y es más fácil para las personas que ya usan bootstrap entender el código.
• La mejor práctica para bootstrap es: no anular las clases boostrap predeterminadas ni hacer que hagan cosas funky. Por ejemplo:

  //Malo
  .col-md-12 {
  color de fondo: rojo;
  }

  //Bueno
  .outer-background {
  color de fondo: rojo;
  }

  • Cómo estructurar un nuevo proyecto React
  • Como programador principiante, ¿es bueno usar WordPress?
  • Cómo crear un menú personalizado con sangrías triangulares a cada lado
  • ¿Qué necesitamos saber antes de aprender AngularJS?
  • ¿Por qué JavaScript representa los tipos de nodo por números en lugar de su etiqueta?

  R

  La razón detrás de esto es: los desarrolladores que puedan tocar su código ya no estarán seguros de su comportamiento. Deje que las clases de bootstrap hagan lo suyo y su base de código será predecible, aunque mucho más grande.

• Para css, use las variables de punto de interrupción ya definidas dentro de bootstrap. Por ejemplo, si desea usar min-width en un punto de interrupción medio, use $ screen-sm-max. Si desea usar max-width en el punto de corte medio, use $ screen-md-min.
• Si está utilizando la última versión de bootstrap, use esta sintaxis, ya que es mucho más sencilla:

  @include media-breakpoint-down (xl) {
  altura: 300 px;
  }
  yo

  En lugar de usar:

@media screen y (max-width: $ screen-lg-max) {
altura: 300 px;
}

• Si está utilizando puntos de interrupción personalizados, agregue un comentario sobre la consulta de medios que explique por qué lo está utilizando.
• Bootstrap 4 también tiene un sistema de cuadrícula basado en flexbox. Use esto si el número de columnas es dinámico y propenso a cambiar.