Estoy tratando de crear una "fila principal de Bootstrap" que pueda albergar diferentes componentes de React en columnas separadas dentro de esa fila, pero dado que son componentes de React completamente diferentes, quieren renderizarse uno debajo del otro. No estoy seguro de si estoy cometiendo un error de CSS, Bootstrap o React.
En este momento, solo necesito representar un componente de col-1 y un componente diferente de col-11 en la misma fila, una versión simplificada de mi código es la siguiente:
ReactApp.js:
Import React from "react"; Import {Container, Col, Row} from "react-bootstrap"; Import Comp1 from "./components/Comp1"; Import Comp2 from "./components/Comp2"; function App() { return ( <Row> <Comp1 /> <Comp2 /> </Row> ); } export default App;Componentenet1.js:
Import React from "react"; Import {Container, Col, Row} from "react-bootstrap"; const Comp1 = () => { return ( <Col md={1}> <content> </Col> ); } export default Comp1;Componentenet2.js:
Import React from "react"; Import {Container, Col, Row} from "react-bootstrap"; const Comp2 = () => { return ( <Col md={11}> <content> </Col> ); } export default Comp2;Gracias de antemano por cualquier ayuda.
2 cosas:
Asegúrese de haber instalado bootstrap y react-bootstrap usando NPM: npm install bootstrap react-bootstrap
Asegúrese de importar el archivo css principal desde bootstrap, para que pueda aplicar los estilos de cuadrícula import 'bootstrap/dist/css/bootstrap.min.css';
import "./styles.css"; import { Col, Container, Row } from "react-bootstrap"; import 'bootstrap/dist/css/bootstrap.min.css'; export default function App() { return ( <Container> <Row> <Comp1 /> <Comp2 /> </Row> </Container> ); } const Comp1 = () => { return <Col md={1}>Hello world</Col>; }; const Comp2 = () => { return <Col md={11}>Foobar</Col>; };