如何设置Bootstrap通知下拉菜单不向右溢出并实现响应式自适应

1. 调整HTML结构与Bootstrap内置属性 #

首先修改你现有通知模块的代码，修正下拉弹出方向和对齐规则：

<div class="float-end position-relative">
    <div class="dropdown">
        <!-- OPEN NOTIFICATION -->
        <!-- 移除错误的dropstart类，让下拉菜单从按钮底部正常弹出 -->
        <div class="btn-group">
            <div class="section-title">
                <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
                    <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>
                <!-- 新增dropdown-menu-end让菜单右边缘和按钮对齐，加data-bs-popper防止自动偏移溢出 -->
                <ul class="dropdown-menu dropdown-menu-end dropdown-responsive" data-bs-popper="static">
                    <li class="dropdown-header" data-bs-display="static">Notification</li>
                    <?php 
                    foreach ($log as $value) { ?>                                   
                    <li class="dropdown-list-content dropdown-list-icons">
                        <a href="#" class="dropdown-item dropdown-item-unread">
                            <div class="dropdown-item-desc">
                            <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>
                    </li>
                    <?php } ?>
                    <li class="d-flex justify-content-between align-items-center px-3 py-2 border-top">
                        <div class="dropdown-header p-0">
                            <a href="<?= site_url('dashboard/del_notif')?>"><b>Hapus Notifikasi</b></a>
                        </div>
                        <div class="dropdown-header p-0">
                            <a href="<?= site_url('notifikasi'); ?>">Lihat Semua</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- CLOSE NOTIFICATION -->
    </div>
</div>

核心修改点：

• 给外层浮动容器加position-relative，确保下拉菜单定位基准正确
• 下拉菜单新增dropdown-menu-end类，让菜单右边缘与按钮右边缘对齐，避免向右溢出
• 新增data-bs-popper="static"禁用popper的自动偏移逻辑，避免菜单被推出可视区域
• 修正原HTML结构不规范问题：将ul内的直接div改为用li包裹，符合HTML列表规范
• 把底部两个浮动按钮改为用flex布局对齐，避免浮动导致的宽度溢出

2. 新增自定义CSS实现响应式适配 #

在你的样式文件中加入以下代码，控制下拉菜单的尺寸适配不同屏幕：

/* 通知下拉菜单响应式样式 */
.dropdown-responsive {
    /* 桌面端最大宽度，可根据需求调整 */
    max-width: 360px;
    width: 100%;
}
/* 适配小屏设备 */
@media (max-width: 576px) {
    .dropdown-responsive {
        /* 移动端最大宽度占屏幕90%，不会超出屏幕 */
        max-width: 90vw;
        /* 让菜单在移动端居中弹出，不需要可直接删除这两行 */
        right: 50% !important;
        transform: translateX(50%) !important;
    }
}
/* 让下拉菜单内的文字自动换行，避免内容撑宽菜单 */
.dropdown-responsive .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
}

修改后即可实现：

• 下拉菜单不会向右侧溢出屏幕
• 桌面端固定最大宽度，移动端自适应屏幕宽度
• 长通知内容自动换行，不会撑破菜单布局

内容的提问来源于stack exchange，提问作者Meow