我正在嘗試創建一個“主引導行”，它可以在該行的不同列中容納不同的 React 組件，但由于它們是完全不同的 React 組件，因此它們希望在彼此下方呈現。我不確定這是我犯的 CSS、Bootstrap 還是 React 錯誤。
現在，我只需要在同一行上渲染一個組件col-1和一個不同組件col-11，我的代碼的簡化版本如下：
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;
組件1.js：
Import React from "react";
Import {Container, Col, Row} from "react-bootstrap";
const Comp1 = () => {
return (
<Col md={1}>
<content>
</Col>
);
}
export default Comp1;
Componenet2.js：
Import React from "react";
Import {Container, Col, Row} from "react-bootstrap";
const Comp2 = () => {
return (
<Col md={11}>
<content>
</Col>
);
}
export default Comp2;
提前感謝您的幫助。
uj5u.com熱心網友回復：
2件事：
確保您已安裝
bootstrap并react-bootstrap使用 NPM：npm install bootstrap react-bootstrap確保從引導程式匯入主 css 檔案，以便它可以應用網格樣式
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>;
};
Codesandox
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/486007.html
標籤：javascript html css 反应 反应引导