Las filas / columnas de React-Bootstrap no tienen el ancho completo de la pantalla (solo el 50%)

Solución:

Por defecto en bootstrap, container width y max-width está configurado en algunos px igual que,

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container {
    max-width: 540px;
} 

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Tienes que configurar max-width: 100% igual que,

.container {
  max-width: '100%'  //This will make container to take screen width
}

O, otra forma es, puede agregar fluid apoyo a Container,

líquido – Deje que el contenedor llene todo el espacio horizontal disponible.

<Container fluid>
  ...
</Container>

Nota: Aquí Col tomará por defecto equal space.

Col le permite especificar anchos de columna en 5 tamaños de puntos de interrupción (xs, sm, md, large y xl).

Por ejemplo,

<Row>
    <Col xs={6} md={8}>
      xs=6 (6 parts of screen on small screen) md=8 (8 parts of screen on medium screen)
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
</Row>

Tuve el mismo problema y mi componente raíz no era 100% ancho. Establecer el ancho al 100% solucionó el problema.

#root {
    width: 100%;
}

---

---

Utiliza Nuestro Buscador