[英]Dropdown working with Bootstrap 4 not working with Bootstrap 5
[英]Bootstrap Dropdown menunot working
我花了很多时间来添加Bootstrap Dropdown菜单或dropup菜单,但是尝试编写很多代码却无法正常工作,这是我的最后一个代码版本,希望有人能帮助我:
<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;
}
您需要在其中包含Bootstrap Javascript和jQuery。
另外,您还缺少<i>
标记中的dropdown-toggle
类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.