html - 在 HTML/CSS 中实现下拉列表

Question

我正在尝试在 HTML/CSS 中实现下拉列表，更具体地说是在 React 中。我在这里找到了一个教程，展示了我可能感兴趣的内容:Link

唯一的问题是，当我在我的 React 元素中包含这段代码并稍微修改它时，没有任何附加内容......这似乎是 Bootstrap 的问题，但我无法识别它。
这是发生的事情:

这是我的代码:

import React, { Component } from "react";
import "./VerticalDots.css";


export default class VerticalDots extends Component {

  render() {
    return (
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src={require("../imgs/3dots-vertical.png")} alt="NotFound"/>
        </button>

        <ul class="dropdown-menu">
          <li>0123 4567 8912 3456</li>
          <li>0123 4567 8912 3456</li>
          <li>0123 4567 8912 3456</li>
        </ul>
      </div>
    );
  }
}

我们将不胜感激!

Answer 1

您似乎没有加载 Bootstrap 的 Assets 。在您链接的代码笔中，您可以看到，在“设置 > CSS”和“设置 > JavaScript”下，需要 Bootstrap。

要加载它们，您必须从您的包中导入它们，例如，如果您使用 webpack，则在 App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

另一种选择是使用 CDN，就像 Codepen 所做的那样，但您可能希望将上述内容用于生产构建。