如何使通知不扩展到正确的引导?

Question

我想问一下如何使通知不向右展开。我希望通知显示是响应的，这样它就可以调整自己。

完整代码:https://pastebin.pl/view/cb415b64输入图片描述

代码通知:

<div class="float-end">
<div class="dropdown">
<!-- OPEN NOTIFICATION -->
<div class="btn-group dropstart">
<div class="section-title">
<button type="button" class="btn btn-primary" data-bs-toggle="dropdown">

<span class="fa-stack fa-3x" id="total" data-count="<?= $jlmh_log; ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
<path
d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z" />
</svg></span>
</button>
<ul class="dropdown-menu dropdown-responsive ">
<div class="dropdown-header" data-bs-display="static" aria-expanded="false">Notification</div>
<?php 
foreach ($log as $value) { ?>                                   
<div class="dropdown-list-content dropdown-list-icons">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-desc dropdown-menu-lg-end">
<i class="bi bi-bell"></i>
<small><?= $value->id_log == 3 ? : NULL ; ?>Waka Sarana Prasarana
<?= $value->log_desc; ?></small>
<div class="time text-primary"><small><i class="bi bi-calendar-check-fill"></i>&nbsp;&nbsp;<?= $value->log_time; ?></small></div>
</div>
</a>
<?php } ?>
<div class="float-end">
<div class="dropdown-header" data-bs-display="static" aria-expanded="false"><a href="<?= site_url('notifikasi'); ?>">Lihat Semua</a></div>
</div>
<div class="float-start">
<div class="dropdown-header"><a href="<?= site_url('dashboard/del_notif')?>"><b>Hapus Notifikasi</b></a></div>
</div>
</ul>
</div>
</div>
<!-- CLOSE NOTIFICATION -->

输入图片描述

Answer 1

尝试将<ul class="dropdown-menu dropdown-responsive ">更改为<ul class="dropdown-menu dropdown-menu-end">。同时移除dropstart类。看看它是否有效?