javascript - 容器、行、列 - 在 React-Bootstrap 中不起作用
问题描述
我目前正在尝试学习 React 和 React-Bootstrap。
我正在尝试充分利用 React-Bootstrap 网格布局。我不确定我是否执行不正确。我的直觉说我在某个地方使用了一个不合时宜的版本,因为据我所知,“容器、列、行”功能根本不起作用。
可能是什么问题?我没主意了。
来自 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:
"_from": "bootstrap@latest",
"_id": "bootstrap@4.3.1",
来自“react-bootstrap”目录的 package.json:
"_from": "react-bootstrap@^1.0.0-beta.6",
"_id": "react-bootstrap@1.0.0-beta.6",
请注意,我也尝试过安装和使用bootstrap@3
,但没有成功:
npm install bootstrap@3 --save
npm i --save bootstrap@3
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...
显示的文本应该是HelloWorld
:
Hello
World
解决方案
我已经解决了这个问题。这是我的失误。我错过了 react-bootstrap main 关于样式表的设置的关键部分。
复制index.html
并粘贴最新引导样式表的路径:
<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"
/>
推荐阅读
- node.js - 在 Node.js 中断开连接期间无法记录套接字 ID
- python - 为什么在 tensorflow 中搜索不同的库,即使它们的安装方式相同?
- kubernetes - 根据我是否使用 --dry-run --debug,Helm 似乎会以不同的方式解析我的图表?
- angular - 在 Angular 5 中关闭 ng-modal 之前,如何检查表单是否有未保存的更改?
- c# - 为基于字典的类创建多个自定义比较器
- reactjs - React Native,状态改变,但组件没有正确渲染
- jenkins - Jenkins:更改顶级环境变量
- laravel - 在 Laravel 中使用带有字符串值的“for循环”从数据库中获取数据
- python - 如何以迭代方式使用 numpy 将两个矩阵相乘。对于python中的给定范围
- javascript - 如何在承诺中返回请求的响应?