样式ASP.net DropDownList不选择元素DropDown列表

Question

我想设置我的asp下拉列表，但我在网上找到的所有解决方案都与select元素的dropdownlist相关。现在我正在使用bootstrap来尝试获取下面显示的输出，但我也可以使用其他方法，如css和jquery，只要我能够实现下面显示的输出。

这是我目前的输出：

这是我想要实现的输出： 这是我的代码：

    //aspx file
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="Scripts/jquery-1.8.0.min.js"></script>
    <script src="Scripts/bootstrap-select.min.js"></script>
    <link href="Content/bootstrap-select.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

<script type="text/javascript">

    $(document).ready(function () {

        $(".form-control").form - control();

    });

</script>

            <asp:DropDownList ID="DropDownList" runat="server" Width="136px" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" ForeColor="Black" CssClass="form-control"> 

感谢您的帮助!!

Answer 1

正如我之前所说的那样按下按钮你想要实现你必须在你的下拉列表中添加bootstrap类 btn btn-default ：

<asp:DropDownList ID="DropDownList" runat="server" Width="136px" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" ForeColor="Black" CssClass="btn btn-default form-control">

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="btn btn-default">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

＆＃13;

＆＃13;

我已经为您创建了一支笔来测试Test it here