html - Bootstrap 下拉菜单不起作用

Question

我花了很多时间来添加 Bootstrap 下拉菜单或下拉菜单，但尝试编写大量代码却无法正常工作，这是我最后一个版本的代码，希望能找到任何人帮助我:

<div class="card">
@if (Model.Photo == null)
{
    <img src='~/Content/default-user-image.png' style="width: 100%;">
}
else
{
    <img src='@Url.Action("Show", "Members", new { id = Model.UniqueId })' alt="@Model.Name" style="width: 100%;">
}
<div class="cardcontainer">
    <h1>@Model.Name</h1>
    <p class="cardtitle">@Model.Email</p>
    <dl>
        <dt>
            @Html.DisplayName("Addresses")
        </dt>

        <dd>
            @foreach (var item in Model.Address.Where(m => m.MemberId == Model.UniqueId))
        {
                <details>
                    <summary>@(item.Country + '-' + item.Governorate + '-' + item.District + '-' + item.Street + '-' + item.BuildingNumber)</summary>
                </details>
            }

        </dd>

        <dt>
            @Html.DisplayName("Personal ID")
        </dt>

        <dd>
            @foreach (var item in Model.PersonalID.Where(m => m.MemberId == Model.UniqueId))
        {
                <details>
                    <summary>@(item.IDType.Name + '-' + item.IDNumber)</summary>
                </details>
            }
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Phone)
        </dt>

        <dd>
            @foreach (var item in Model.Phone.Where(m => m.MemberId == Model.UniqueId))
        {
                <details>
                    <summary>@(item.PhoneType.Name + '-' + item.Code + '-' + item.Number)</summary>
                </details>
            }
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Profile)
        </dt>

        <dd>
            @foreach (var item in Model.Profile.Where(m => m.MemberId == Model.UniqueId))
        {
                <details>
                    <summary>@(item.Category.Name + '-' + item.SubCategory.Name + '-' + item.UniversityId + '-' + item.LibraryAccess)</summary>
                </details>
            }

        </dd>

        <dt></dt>
        <dd>
            <div class="dropdown">
                <i class="fa fa-plus fa-lg" style="color:#428bca;cursor:pointer;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"></i>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="@Url.Action("Create", "Addresses",new {id=Model.UniqueId })">Address</a></li>
                    <li><a href="@Url.Action("Create", "PersonalIDs",new {id=Model.UniqueId })">Personal ID</a></li>
                    <li><a href="@Url.Action("Create", "Phones",new {id=Model.UniqueId })">Phone</a></li>
                    <li><a href="@Url.Action("Create", "Profiles",new { id=Model.UniqueId})">Profile</a></li>
                </ul>
            </div>
        </dd>
    </dl>
    @*<p>
        <div class="dropdown">
            <i class="fa fa-plus fa-lg" style="color:#428bca;cursor:pointer;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"></i>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="@Url.Action("Create", "Addresses",new {id=Model.UniqueId })">Address</a></li>
                <li><a href="@Url.Action("Create", "PersonalIDs",new {id=Model.UniqueId })">Personal ID</a></li>
                <li><a href="@Url.Action("Create", "Phones",new {id=Model.UniqueId })">Phone</a></li>
                <li><a href="@Url.Action("Create", "Profiles",new { id=Model.UniqueId})">Profile</a></li>
            </ul>
        </div>
    </p>*@
</div>

这是 CSS 代码:

    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
}

.cardcontainer {
    padding: 0 16px;
}

.container::after {
    content: "";
    clear: both;
    display: table;
}

.cardtitle {
    color: grey;
    font-size: 18px;
}

.cardbutton {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

.carda {
    text-decoration: none;
    font-size: 22px;
    color: black;
}

Answer 1

您需要 Bootstrap Javascript并且 jQuery 必须包含在它之前。

此外，您还缺少 dropdown-toggle在你的类(class) <i>标签。