Bootstrap utiliza un sistema de cuadrícula receptivo de 12 columnas, lo que facilita colocar los elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap se pueden aplicar a un elemento div . Bootstrap tiene diferentes atributos de ancho de columna que utiliza según la anchura de la pantalla del usuario. Por ejemplo, los teléfonos tienen pantallas estrechas y las computadoras portátiles tienen pantallas más anchas. Tomemos, por ejemplo, la clase col-md-* . Aquí, md significa medio, y * es un número que especifica cuántas columnas de ancho debe tener el elemento. En este caso, se está especificando el ancho de columna de un elemento en una pantalla de tamaño mediano, como una computadora portátil. En la aplicación de fotos Cat que estamos construyendo, usaremos col-xs-* , donde xs significa extra pequeño (como una pantalla de teléfono móvil extra pequeño), y * es el número de columnas que especifican cuántas columnas de ancho hay El elemento debe ser. Ponga los botones Like , Info y Delete lado a lado al anidar los tres dentro de un elemento <div class="row"> , luego cada uno dentro de un elemento <div class="col-xs-4"> . La clase de row se aplica a un div , y los propios botones se pueden anidar dentro de ella.

```yml tests: - text: Todos sus botones deben estar anidados dentro del mismo elemento div con la row clase. testString: 'assert($("div.row:has(button)").length > 0, "Your buttons should all be nested within the same div element with the class row.");' - text: Cada uno de sus botones Bootstrap debe estar anidado dentro de su propio elemento div con la clase col-xs-4 . testString: 'assert($("div.col-xs-4:has(button)").length > 2, "Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.");' - text: Asegúrese de que cada uno de los elementos de su button tenga una etiqueta de cierre. testString: 'assert(code.match(/<\/button>/g) && code.match(/

CatPhotoApp