HTML/CSS 中下拉列表的实现答案

【问题标题】：Implementation of a dropdown list in HTML/CSSHTML/CSS 中下拉列表的实现
【发布时间】：2019-07-31 02:30:58
【问题描述】：

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

唯一的问题是，当我在我的 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>
    );
  }
}

非常感谢您的帮助！

【问题讨论】：

ul 也应该有 aria-labelledby="dropdownMenuButton" 名称为 dropdownMenuButton 与您的按钮的 id 相同检查它here
您的项目中是否需要 bootstrap.js 和 bootstrap.css？您在控制台中看到任何错误吗？

标签： html css reactjs bootstrap-4

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

通过添加解决：

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

【讨论】：

与其将您的解决方法发布为“答案”，不如接受Matthieu Libeer 的答案。