HTML/CSS下拉列表的实现

Question

我试图在HTML/CSS中实现下拉列表，更具体地说是在React中。我在这里找到了一个教程，展示了一些我感兴趣的东西：链接

唯一的问题是，当我在我的React项目中包含这段代码并修改它时，没有任何附加.这似乎是一个问题的引导，但我无法确定它。

下面是发生的情况：

这是我的代码：

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的资产。在链接的代码页中，您可以看到，在“设置> CSS”和“设置> JavaScript”下，需要引导。

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

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

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

Answer 2

通过添加：

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