ASP.NET Core MVC文本编辑器下拉菜单空白与尺寸问题修复

问题描述 #

我在ASP.NET Core MVC中自制的文本编辑器功能正常，但颜色选择下拉菜单有两个样式问题：

• 9个默认颜色按钮之间存在多余空白
• 下拉菜单无法缩小到匹配内容的尺寸

已将下拉菜单背景设为灰色方便观察，原代码如下：

<div class="btn-group   " style="position:static;  z-index: 9999">
    <button type="button" class="btn dropdown-toggle " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style=" z-index: 9999;">
        <img src="~/assets/theme/text-color.png" style="width:20px;height:20px;" />
    </button>
    <div class="dropdown-menu text-end " style="background-color:lightgrey; z-index:9999">
        <div class="row">
            <div class="col-4 pe-0  ">
                <button id="@Model.button" class=" w-100    rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:white" data-value="white">
                </button>
            </div>
            <div class="col-4 p-0 ">
                <button id="@Model.button" class=" w-100    rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:black" data-value="black">
                </button>
            </div>
            <div class="col-4 ps-0">
                <button id="@Model.button" class=" w-100   rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:red" data-value="red">
                </button>
            </div>
            <div class="col-4 pe-0">
                <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:yellow" data-value="yellow">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class=" w-100  rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:blue" data-value="blue">
                </button>
            </div>
            <div class="col-4 ps-0">
                <button id="@Model.button" class=" w-100 rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:green" data-value="green">
                </button>
            </div>
            <div class="col-4 pe-0">
                <button id="@Model.button" class="w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:purple" data-value="purple">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:brown" data-value="brown">
                </button>
            </div>
            <div class="col-4 ps-0">
                <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:pink" data-value="pink">
                </button>
            </div>
            <div class="col-12 py-0">
                <input id="@Model.button" class=" w-100  " type="color" name="foreColor" value="#AABBCC">
               @* <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;">
                </button>*@
            </div>

        </div>

    </div>
</div>

修复方案及修改后代码 #

关键调整点 #

1. 消除按钮间隙：

   • 给row添加g-0类，移除列之间的默认间隙
   • 统一所有col-4为p-0，避免左右padding不一致
   • 调整按钮边框，去掉重复的边框（比如给每行中间和右侧按钮移除左边框，避免重叠）

2. 缩小下拉菜单尺寸：

   • 给dropdown-menu添加min-width: auto; width: fit-content;，让菜单宽度自适应内容
   • 移除不必要的内边距

修改后的完整代码：

<div class="btn-group" style="position:static; z-index: 9999">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="z-index: 9999;">
        <img src="~/assets/theme/text-color.png" style="width:20px;height:20px;" />
    </button>
    <div class="dropdown-menu text-end p-0" style="background-color:lightgrey; z-index:9999; min-width: auto; width: fit-content;">
        <div class="row g-0">
            <!-- 第一行 -->
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:white" data-value="white">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-start-0" data-element="foreColor" style="height:20px;background-color:black" data-value="black">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-start-0" data-element="foreColor" style="height:20px;background-color:red" data-value="red">
                </button>
            </div>
            <!-- 第二行 -->
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-top-0" data-element="foreColor" style="height:20px;background-color:yellow" data-value="yellow">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-start-0 border-top-0" data-element="foreColor" style="height:20px;background-color:blue" data-value="blue">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-start-0 border-top-0" data-element="foreColor" style="height:20px;background-color:green" data-value="green">
                </button>
            </div>
            <!-- 第三行 -->
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-top-0" data-element="foreColor" style="height:20px;background-color:purple" data-value="purple">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-start-0 border-top-0" data-element="foreColor" style="height:20px;background-color:brown" data-value="brown">
                </button>
            </div>
            <div class="col-4 p-0">
                <button id="@Model.button" class="w-100 rounded-0 border border-dark border-start-0 border-top-0" data-element="foreColor" style="height:20px;background-color:pink" data-value="pink">
                </button>
            </div>
            <!-- 颜色选择器 -->
            <div class="col-12 p-1 mt-1 border-top border-dark">
                <input id="@Model.button" class="w-100" type="color" name="foreColor" value="#AABBCC">
            </div>
        </div>
    </div>
</div>

额外说明 #

• 给颜色选择器添加了mt-1和顶部边框，和颜色按钮区域做视觉区分
• 按钮的边框调整避免了相邻按钮边框重叠导致的粗线视觉效果
• dropdown-menu的p-0移除了默认内边距，让内容完全贴合菜单边缘

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