我正在使用Bootstrap作为框架为我的大学项目创建一个类似于文本编辑器的网站.我使用动态选项卡来创建网站的菜单.这是我拥有的代码:
<!--Bootstrap styling import-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Creation of the dynamic tabs-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="file-tab" data-bs-toggle="tab" data-bs-target="#file-tab-pane" type="button" role="tab" aria-controls="file-tab-pane" aria-selected="false">File</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active px-4" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-tab-pane" type="button" role="tab" aria-controls="edit-tab-pane" aria-selected="false">Edit</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="layout-tab" data-bs-toggle="tab" data-bs-target="#layout-tab-pane" type="button" role="tab" aria-controls="layout-tab-pane" aria-selected="false">Layout</button>
</li>
</ul>
<div class="tab-content border border-1" id="myTabContent">
<!--Content in the file tab-->
<div class="tab-pane fade" id="file-tab-pane" role="tabpanel" aria-labelledby="file-tab" tabindex="0">...</div>
<!--Content in the home tab-->
<div class="tab-pane fade show active d-flex justify-content-center my-2" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="d-flex align-items-center overflow-auto gap-1">
<button type="button" class="btn" id="boldButton" data-bs-toggle="button"><b>B</b></button>
<button type="button" class="btn" id="italicsButton" data-bs-toggle="button"><i>I</i></button>
<button type="button" class="btn" id="underlineButton" data-bs-toggle="button"><u>U</u></button>
<select class="ms-5" name="font" id="font">
<option value="times-new-roman">Times New Roman</option>
<option value="helvetica">Helvetica</option>
<option value="garamond">Garamond</option>
<option value="calibri">Calibri</option>
<option value="arial">Arial</option>
</select>
<button type="button" class="btn" id="increaseFontSize">Size△</button>
<button type="button" class="btn me-5" id="decreaseFontSize">Size▽</button>
<button type="button" class="btn" data-bs-toggle="button">Left Align</button>
<button type="button" class="btn" data-bs-toggle="button">Centre Align</button>
<button type="button" class="btn" data-bs-toggle="button">Right Align</button>
<button type="button" class="btn" data-bs-toggle="button">Justify</button>
<select name="spacing" id="spacing">
<option value="" disabled selected>Line Spacing</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5 (Default)</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
</select>
<button type="button" class="btn ms-5">Bulleted List</button>
<button type="button" class="btn">Numbered List</button>
</div>
</div>
<!--Content in the edit tab-->
<div class="tab-pane fade d-flex justify-content-center my-2" id="edit-tab-pane" role="tabpanel" aria-labelledby="edit-tab" tabindex="0">
<div class="d-flex align-items-center overflow-auto gap-1">
<button type="button" class="btn">Undo</button>
</div>
</div>
<!--Content in the layout tab-->
<div class="tab-pane fade" id="layout-tab-pane" role="tabpanel" aria-labelledby="layout-tab" tabindex="0">...</div>
</div>
<div class="text-area d-flex justify-content-center my-5">
<div id="input" contenteditable="true"></div>
</div>
<!--Bootstrap js import-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>然而，当我查看网页时，选项卡工作正常，但从主页切换到编辑选项卡时，编辑选项卡中的按钮会堆叠在分区内的下方，就好像主页选项卡中的按钮仍然在那里一样，它们只是不可见.在不同的选项卡(例如布局)中添加更多按钮，然后将其堆叠在编辑选项卡中的按钮下方.这就是它看起来的样子:
我try 删除我自己的样式表和JS代码，从列表更改为dis元素，将它们从按钮更改为指向其各个dis元素的链接，但一切都不起作用.