无法使用 materialize.css 在 asp.net Web 表单中添加下拉菜单答案

【问题标题】：Cannot add Dropdown in asp.net web forms with materialize.css无法使用 materialize.css 在 asp.net Web 表单中添加下拉菜单
【发布时间】：2016-07-06 19:10:38
【问题描述】：

首先，我是 asp 的新手，所以问题可能太傻了，但在使用 materialize.css 后，我仍然无法将下拉列表添加到我的网页中。没有它，下拉列表工作正常，但在链接物化文件不起作用。我尝试从工具箱中添加下拉列表以及属于物化的下拉列表，但尽管存在代码，但它没有显示。如何解决这个问题？
这是我的母版页的代码 sn-p，其中包含从工具箱添加的下拉菜单 `

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="font/material-design-icons/material.css" rel="stylesheet" type="text/css" />
    <link href="styles/materialize.min.css" rel="stylesheet" type="text/css" />
    <title></title>
    <style>
        .wraped {
            margin-top:10px;
            margin-left:20px;
            margin-right:20px;
        }
        </style>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div class="wraped">
    <div class="container" style="width:80%">
    <form id="form1" runat="server">
        <div class="row">
            <!--Navbar-->
            <div class="col s4">
                <asp:Image ID="logo" CssClass="z-depth-3 responsive-img" ImageUrl="~/images/logo.png" runat="server" Height="122px" Width="214px" />
                </div>
            <div class="col s6 offset-s2" style="border-bottom:solid 4px #669900;margin-top:25px;" >
                <asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" runat="server" StaticMenuStyle-HorizontalPadding="10px" Width="100%">
                    <StaticHoverStyle BackColor="#003300" ForeColor="White" />
                    <StaticMenuItemStyle Font-Names="Corbel" Font-Size="Large" ForeColor="#CC3300" HorizontalPadding="23px" Font-Bold="True" />
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
                </div>
        <!--Content-->
    <div class="col s12" style="margin-top:20px;">
        <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList><!--Here is the drop down-->
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
            </div>
    </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

` 这是带有materialize下拉列表的代码sn-p

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="font/material-design-icons/material.css" rel="stylesheet" type="text/css" />
    <link href="styles/materialize.min.css" rel="stylesheet" type="text/css" />
    <title></title>
    <style>
        .wraped {
            margin-top:10px;
            margin-left:20px;
            margin-right:20px;
        }
        </style>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div class="wraped">
    <div class="container" style="width:80%">
    <form id="form1" runat="server">
        <div class="row">
            <!--Navbar-->
            <div class="col s4">
                <asp:Image ID="logo" CssClass="z-depth-3 responsive-img" ImageUrl="~/images/logo.png" runat="server" Height="122px" Width="214px" />
                </div>
            <div class="col s6 offset-s2" style="border-bottom:solid 4px #669900;margin-top:25px;" >
                <asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" runat="server" StaticMenuStyle-HorizontalPadding="10px" Width="100%">
                    <StaticHoverStyle BackColor="#003300" ForeColor="White" />
                    <StaticMenuItemStyle Font-Names="Corbel" Font-Size="Large" ForeColor="#CC3300" HorizontalPadding="23px" Font-Bold="True" />
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
                </div>
        <!--Content-->
    <div class="col s12" style="margin-top:20px;">
        <div class="input-field">
    <select>
      <option value="" >Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div><!--Here is the drop down-->

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
            </div>
    </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="js/materialize.min.js"></script>

</body>
</html>

我正在使用 Visual Studio 12

【问题讨论】：

检查这个答案：stackoverflow.com/questions/38170589/…。我相信你的问题是一样的。
问题是下拉列表没有显示出来！，该空间完全显示为空白..在检查元素上显示代码...我也使用了 jquery 初始化，但它仍然是相同的

标签： css asp.net dropdown materialize

【解决方案1】：

在 DropDownList 标签内使用 CssClass="browser-default"。

【讨论】：

【解决方案2】：

你可以使用

class="browser-default z-depth-5"

用于asp下拉列表控件。

【讨论】：