css - ASP :DropDownList bootstrap style - always too tall w/o border?

标签 css asp.net bootstrap-4

场景:

  • 我无法正确设置我的asp:DropDownList 样式。
  • 它工作得很好,但与表单的其余部分不匹配。
    具体而言,表单的其余部分占地面积较小,没有背景和边框。

待办事项:

  • 我们想要带有边框和白色背景的下拉菜单(就像在 bootstraps 表单页面上找到的那样)(很抱歉 - 我还不能发布图片)。


试用案例:
为了进行调试,我制作了一个裸页,其中只有一个下拉菜单和一个用于比较的文本框。这是代码:

<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>

  • 而且看起来还是不对(没有边框,仍然是背景)

  • 我已经尝试使用 Bootstrap 选择器 - 但似乎 .net 忽略了我们为更改类所做的一切。



我对此进行了大约 4 个小时的研究 - 但仍然一无所获
你能帮忙吗?会尝试任何事情。
请推荐。谢谢。

最佳答案

尝试删除 jquery-ui。 仅使用 Bootstrap 。

关于css - ASP :DropDownList bootstrap style - always too tall w/o border?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52069966/

相关文章:

node.js - 名称只能包含 URL 友好字符

php - 提交表单元素后如何将网页重定向到不同的网页

html - float 图像旁边的嵌套列表项的缩进

c# - 如何增加复选框列表项的宽度

c# - SharePoint 2013 更新面板空闲

c# - 在本地网络中部署 ASP .NET Web Core 2.0 中的项目

html - Mozilla 和 Chrome 在 CSS 上的区别

css - LESS 使用伪选择器添加类

javascript - 单击项目时固定导航栏不折叠(小屏幕设备)

css - 在 Bootstrap 4 的输入旁边制作标签