React Bootstrap表未格式化

Question

我是一个非常新的反应者，并且正在尝试遵循基本的表格教程：（http://allenfang.github.io/react-bootstrap-table/example.html#basic）

我已经安装了react-bootstrap-table

  

npm install react-bootstrap-table --save

我已经导入了引导表

  

从导入{BootstrapTable，TableHeaderColumn}   'react-bootstrap-table';

我已经导入了css文件：

  

导入   '../../ node_modules / react-bootstrap-table / dist / react-bootstrap-table-all.min.css';

使用上述方法，我希望表格显示如下：

但是我在代码中看到的是：

为什么表格没有显示在示例中？

sudo pip install Pillow

Answer 1

尝试此行 导入'../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css' 在主要入口组件中

Answer 2

供以后参考，您只需要从应用程序的基础而不是node_modules路径导入。我使用以下方法，效果很好：

import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'

Answer 3

组件示例中提供的片段没有提到需要安装 react-bootstrap 模块和 bootstrap 本身。此处提及：reactbootstrap getting started docs

TLDR：运行 * Zahlenraten Mini Edition * @version 1.20 * @date 2020-12-31 * @author Dark */ package ratespiel; import java.util.Random; import javax.swing.JOptionPane; public class Zahlraten { private int zufallszahl; private int ratezahl; Zahlraten() { ratezahl = -1; } void setZufallszahl(int zahl) { zufallszahl = zahl; } int getZufallszahl() { return zufallszahl; } void setRatezahl(int zahl) { ratezahl = zahl; } int getRatezahl() { return ratezahl; } public static void main(String[] args) { var spiel = new Zahlraten(); var geraten = false; var versuchszaehler = 0; JOptionPane.showMessageDialog(null, "Erraten Sie eine Zahl zwischen 1 und 100"); var randomGenerator = new Random(); spiel.setZufallszahl(randoGenerator.nextInt(101)); while (!geraten) { spiel.setRatezahl(Integer.parseInt(JOptionPane.showMessageDialog("Welche Zahl wird gesucht?"))) versuchzaehler++; if (spiel.getRatezahl() < spiel.getZufallszahl()) { JOptionPane.showMessageDialog(null, "Ihre Zahl ist zu Klein!"); } else { if (spiel.getRatezahl() > spiel.getZufallszahl()) { JOptionPane.shwoMessageDialog(null, "Ihre Zahl ist zu Groß!"); } else { geraten = true; JOptionPane.showMessageDialog(null, "Glückwunsch! Sie haben die Zahl nach + versuchszaehler + Versuchen erraten!"); } } } } }```

Answer 4

我能够通过在 index.js 文件中包含以下代码来解决这个问题。不仅我的表格没有任何格式，我的初始项目也没有。

导入'bootstrap/dist/css/bootstrap.min.css';