asp:DropDownList 引导样式 - 总是太高而没有边框？答案

【问题标题】：asp:DropDownList bootstrap style - always too tall w/o border?asp:DropDownList 引导样式 - 总是太高而没有边框？
【发布时间】：2019-02-03 19:13:54
【问题描述】：

场景：

我无法正确设置 asp:DropDownList 样式。
它运行良好，但与表单的其余部分不匹配。
具体来说，表单的其余部分占用空间更小、没有背景和边框。

待办事项：

我们想要带有边框和白色背景的下拉菜单（就像在引导表单页面上找到的那样）（抱歉，我还不能发布图片）。

试用案例：
为了进行调试，我制作了一个只有一个下拉列表和一个文本框可供比较的裸页面。这是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

   <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/bootstrap-select.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/style.css">

    <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet" />
    <link type="text/css" href="css/jquery-ui.structure.min.css" rel="stylesheet" />
    <link type="text/css" href="css/jquery-ui.theme.min.css" rel="stylesheet" />
    
</head>
<body>
    <form id="form1" runat="server">
        <div class="col-5">
            <asp:TextBox runat="server" id="notmuch0" CssClass="form-control"></asp:TextBox>
            <asp:DropDownList ID="DropDownList1" CssClass="form-control-sm" runat="server"><asp:ListItem>1</asp:ListItem></asp:DropDownList>
        </div>
    </form>

               <!-- Javascript-->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-select.js"></script>

    <script src="js/core.min.js"></script>
     <script src="js/script.js"></script>
    <script src="js/popper.min.js"></script>

</body>
</html>

当我们运行代码时，它会为下拉菜单创建以下混乱：

<div class="col-5">
            <input name="notmuch0" type="text" id="notmuch0" class="form-control">
            <select name="DropDownList1" id="DropDownList1" class="form-control-sm select2-hidden-accessible" tabindex="-1" aria-hidden="true">
	<option value="1">1</option>

</select><span class="select2 select2-container select2-container--bootstrap select2-container--below" dir="ltr" style="width: 48px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-DropDownList1-container"><span class="select2-selection__rendered" id="select2-DropDownList1-container" title="1">1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
        </div>

而且看起来还是不对（没有边框，仍然是背景）
我曾尝试使用引导选择选择器 - 但似乎 .net 忽略了我们为更改类所做的一切。

我对此进行了大约 4 小时的研究 - 仍然一无所获
您能帮忙吗？什么都会尝试。
请建议。谢谢。

【问题讨论】：

输出 HTML 标记是否显示已加载引导程序（在样式中）？有没有指定目录下的js文件？
是的，它是作为资源加载的（都是）。

标签： css asp.net bootstrap-4

【解决方案1】：

尝试删除 jquery-ui。仅使用引导程序。

【讨论】：

不幸的是，删除 jquery UI 根本没有帮助。
经过你的思考 - 我真的玩过包含。事实证明，我的 script.js 包含后的 jquery-core 修复了它，但破坏了其他所有内容 - 这让我检查了 script.js，它就在那里：
if (plugins.selectFilter.length) { var i; for (i = 0; i