【发布时间】：2021-06-28 06:56:03
【问题描述】：
我正在使用电子（electron@12.0.0）和引导程序（bootstrap@5.0.0-beta3）。
当我尝试在引导程序上使用下拉菜单或其他一些东西时，它就不起作用了。我不知道我做错了什么，即使我在没有电子的浏览器中打开了index.html，它仍然是shows like this（当我点击它时下拉不起作用）。当我使用小提琴时它的shows like this。
我的renderer.js 是空的，我的preload.js 是这样的
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
我的整个index.html 都在这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align-items-start vh-100">
<div class="row">
<div class="col-xs d-flex drag-region bg-secondary" style="width: 250px;height: 145px;">
</div>
<div class="col">
<div class="row justify-content-end bg-dark" style="height: 32px;">
<header id="titleBar">
<div id="drag-region">
<div id="window-controls">
<a onclick="state('mini')" id="min-button"><img class="icon" srcset="./static/icons/min-w-10.png 1x, ./static/icons/min-w-12.png 1.25x, ./static/icons/min-w-15.png 1.5x, ./static/icons/min-w-15.png 1.75x, ./static/icons/min-w-20.png 2x, ./static/icons/min-w-20.png 2.25x, ./static/icons/min-w-24.png 2.5x, ./static/icons/min-w-30.png 3x, ./static/icons/min-w-30.png 3.5x" draggable="false" /></a>
<a onclick="state('max')" id="max-button"> <img class="icon" srcset="./static/icons/max-w-10.png 1x, ./static/icons/max-w-12.png 1.25x, ./static/icons/max-w-15.png 1.5x, ./static/icons/max-w-15.png 1.75x, ./static/icons/max-w-20.png 2x, ./static/icons/max-w-20.png 2.25x, ./static/icons/max-w-24.png 2.5x, ./static/icons/max-w-30.png 3x, ./static/icons/max-w-30.png 3.5x" draggable="false" /></a>
<a onclick="state('restore')" id="restore-button"><img class="icon" srcset="./static/icons/restore-w-10.png 1x, ./static/icons/restore-w-12.png 1.25x, ./static/icons/restore-w-15.png 1.5x, ./static/icons/restore-w-15.png 1.75x, ./static/icons/restore-w-20.png 2x, ./static/icons/restore-w-20.png 2.25x, ./static/icons/restore-w-24.png 2.5x, ./static/icons/restore-w-30.png 3x, ./static/icons/restore-w-30.png 3.5x" draggable="false" /></a>
<a onclick="state('close')" id="close-button"><img class="icon" srcset="./static/icons/close-w-10.png 1x, ./static/icons/close-w-12.png 1.25x, ./static/icons/close-w-15.png 1.5x, ./static/icons/close-w-15.png 1.75x, ./static/icons/close-w-20.png 2x, ./static/icons/close-w-20.png 2.25x, ./static/icons/close-w-24.png 2.5x, ./static/icons/close-w-30.png 3x, ./static/icons/close-w-30.png 3.5x" draggable="false" /></a>
</div>
</div>
</header>
</div>
<div class="row row-cols-1" style="height: calc(100% - 32px);">
<div class="col d-flex bg-success" style="height: 81px;">
<div class="align-middle">
<h1 id="navTitle">Title</h1>
</div>
</div>
<div class="col-fluid bg-dark" style="height: 32px;">
<div class="row">
<div class="col d-flex">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
</div>
<div class="col-auto d-flex" style="width: fit-content;height: 32px;">
<form class="form-inline d-flex">
<input class="form-control mr-sm-2 text-white" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-sm btn-outline-secondary my-2 my-sm-0 align-baseline" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row align-self-stretch" style="height: calc(100% - 145px);">
<div class="col-xs d-flex align-self-stretch bg-dark" style="width: 250px;">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col d-flex bg-secondary">
</div>
</div>
</div>
<script src="./renderer.js"></script>
</body>
</html>
【问题讨论】：
标签： javascript html electron bootstrap-5