这里的新手,请怜悯:D
所以我有一个带有两个表的 div,它们都包含几个 Bootstrap 按钮。我将它们拉伸到 100% 宽度,以便它们填满整个表格(作为回报,填满整个 div)。
每当我单击其中一个按钮时,我都想隐藏表格并用之前隐藏的其他 div 替换它们。此外,出现了一个后退按钮,应该可以逆转该过程。
其中大部分工作正常,但是,在使用后退按钮返回初始状态后,按钮不再填充整个宽度。我不确定有什么帮助,因为我只接触了表格的样式,而不是它们的元素,而且表格仍然填充了 div 的 100% 宽度,如边框所见(见下文)。
我正在举一个最小的工作示例:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="expires" content="3600">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Hello!</title>
<style>
#options-div {
display: flex;
}
.action-divs, #back-button {
display: none;
}
.options-table {
table-layout: fixed;
border: 2px solid green;
width: 100%;
}
.btn-dark {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="options-div">
<div class="col-sm-2">
<button type="button" class="btn btn-dark" id="back-button">Back</button>
</div>
<div class="col-sm-8">
<table class="options-table">
<tr>
<td>
<button type="button" class="btn btn-dark btn-block" id="jet-button">Jet</button>
</td>
</tr>
</table>
<div class="action-divs" id="jet-div">
</div>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<script src="myscript.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
用于标记。一个带有一个按钮的表格的 div。
还有 javascript:
var jetButton = document.querySelector("#jet-button");
jetButton === null || jetButton === void 0 ? void 0 : jetButton.addEventListener("click", handleJet);
var backButton = document.querySelector("#back-button");
backButton === null || backButton === void 0 ? void 0 : backButton.addEventListener("click", handleBack);
function handleJet() {
var optionsTables = document.querySelector(".options-table");
optionsTables.style.display = "none";
var jetDiv = document.querySelector("#jet-div");
jetDiv.style.display = "flex";
backButton.style.display = "flex";
}
function handleBack() {
var optionsTables = document.querySelector(".options-table");
optionsTables.style.display = "flex";
optionsTables.style.tableLayout = "fixed";
backButton.style.display = "none";
var jetDiv = document.querySelector("#jet-div");
jetDiv.style.display = "none";
}
抱歉 TypeScript 转换的东西,希望它足够可读。基本上点击我的按钮,我想隐藏表格并显示另一个 div 和后退按钮。单击后退按钮时,我想再次隐藏 div 和后退按钮并重新显示初始表格(其中包含按钮)。 我已经尝试过像 btn-block 这样的 Bootstrap 类,但都没有奏效。
提前致谢!
答案 0 :(得分:1)
问题是当您将 flex
添加到表格元素时。您的 button
元素将采用 100% 的宽度,但在应用 flex 后,td
元素的宽度最小
<table class="options-table">
<tr>
<td>
<button type="button" class="btn btn-dark btn-block" id="jet-button">Jet</button>
</td>
</tr>
</table>
您可以尝试使用 align-items: stretch;
并始终将 flex 保留在桌面上。
另外,我建议使用 classList
在元素上添加和删除类,而不是直接更改样式。
MDN element classList