问题描述
我目前正在尝试学习 React 和 React-Bootstrap.
I'm currently attempting to learn React, and React-Bootstrap.
我正在尝试充分利用 React-Bootstrap 网格布局.我不确定我是否错误地实施了它.我的直觉说我在某处使用了一个 impropver 版本,因为据我所知,容器、列、行"功能根本不起作用.
I'm attempting to make good use of the React-Bootstrap grid layout. I'm not sure if I'm implementing it incorrectly. My gut says I'm using an impropver version somewhere because as far as I can tell the "Container, Col, Row" functionality isn't working at all.
可能是什么问题?我没有想法了.
What could be the issue? I'm out of ideas.
来自 package.json 的版本:
Versions from package.json:
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.0.0",
"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"typescript": "^3.3.4000"
来自bootstrap"目录的 package.json:
The package.json from "bootstrap" dir:
"_from": "bootstrap@latest",
"_id": "bootstrap@4.3.1",
来自react-bootstrap"目录的 package.json:
The package.json from "react-bootstrap" dir:
"_from": "react-bootstrap@^1.0.0-beta.6",
"_id": "react-bootstrap@1.0.0-beta.6",
请注意,我也尝试过安装和使用 bootstrap@3
,但没有成功:
Please note that I've also tried installing and using bootstrap@3
with no luck:
npm install bootstrap@3 --save
npm i --save bootstrap@3
来自 index.js 的主要片段:
Major snippet from index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
class Module extends React.Component
{
constructor(props)
{
super(props);
}
clickHandler = (command) =>
{
// ... some handler code here
}
render()
{
return (
<Container>
<Row>
<Col>
<table>
<tr>
<th class="r1_header"> Header 1 </th>
<th class="r1_header"> Header 2 </th>
<th class="r1_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td> // some more button stuff here
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<th class="r2_header"> Header 1 </th>
<th class="r2_header"> Header 2 </th>
<th class="r2_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
</table>
</Col>
<Col>
// another table here... should be aligned next to the
// prev "col" horizontally but is going underneath (vertically)
</Col>
</Row>
</Container>
);
}
}
* 更新 *
这是一个 MCVE...
Here is an MCVE...
显示的文本应该是 HelloWorld
而是它的:
The displayed text should be HelloWorld
but instead its:
Hello
World
推荐答案
我已经解决了这个问题.这是我的失误.我错过了 react-bootstrap main 中关于 样式表的设置的关键部分.
I've resolved the issue. It was a miss-step on my part. I missed a crucial part of the set up outlined on the react-bootstrap main regarding style sheets.
在 index.html
中复制并粘贴最新引导样式表的路径:
In index.html
copy and paste the path to the latest bootstrap style sheets:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
这篇关于容器、行、列 - 在 React-Bootstrap 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!