【发布时间】：2021-08-26 18:18:39
【问题描述】：
我有一个 ASP.Net MVC 应用程序，其中一个屏幕向用户显示卡片列表。这些不是引导卡，我自己制作的，只是将它们称为卡片。在每张卡片的右上角有一个...，当您单击它时，应该会打开一个包含Edit, Details, and Delete 的框。但是，包含这些的框应该超出卡片的边界，但这并没有发生，因此框被切断了。
这是两者的 HTML 和 CSS：
工作示例的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Draft App</title>
<!-- CSS RESET -->
<link href="css/reset.css" type="text/css" rel="stylesheet">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- CUSTOM CSS -->
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Card -->
<div class="container card-border text-center pb-3">
<div class="row top-bg">
<div class="col-md-11">
<h2 class="num-align white-text py-2">1</h2>
</div>
<div class="col-md-1">
<div class="dropdown text-right">
<h1 class="text-right" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</h1>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><img src="img/edit.png" class="det-icon"> Edit</a>
<a class="dropdown-item" href="#"><img src="img/details.png" class="det-icon"> Details</a>
<a class="dropdown-item" href="#"><img src="img/delete.png" class="det-icon"> Delete</a>
</div>
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-md-4">
<h6>Employee Name:</h6>
<p>Cole Perry</p>
</div>
<div class="col-md-4">
<h6>Encova ID:</h6>
<p>34563456</p>
</div>
<div class="col-md-4">
<h6>Injury Date:</h6>
<p>5/15/2020 12:00:00 AM</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h6>Organization Number:</h6>
<p>4</p>
</div>
<div class="col-md-4">
<h6>Injury Type:</h6>
<p>CTS</p>
</div>
<div class="col-md-4">
<h6>Status:</h6>
<p>Active</p>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-secondary ml-auto mr-5">Work</button>
</div>
</div>
<!-- BOOTSTRAP JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- BOOTSTRAP POPPER -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<!-- BOOTSTRAP JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
工作示例的 CSS
/* ---------------------------------------- ALL ---------------------------------------- */
/* ---------------------------------------- INDEX ---------------------------------------- */
/* CARD */
.card-border {
border: 1px solid #000000;
border-radius: 2rem;
width: 40%;
}
.num-align {
text-align: center;
margin-left: 6rem;
}
.det-icon {
width: 2rem;
}
.top-bg {
background-color: #808080;
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.white-text {
color: #ffffff;
}
我的 HTML
<!-- Cards -->
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-4 workCards">
<div class="row top-bg">
<div class="col-md-11">
<h2 style="text-align: center;">@Html.DisplayFor(modelItem => item.ID)</h2>
</div>
<div class="col-md-1">
<div class="dropdown text-right">
<h1 class="text-right" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</h1>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="@Url.Action("Edit", "WC_Inbox", new { id = item.ID })"><img src="~/Images/edit.png" class="det-icon"> Edit</a>
<a class="dropdown-item" href="@Url.Action("Details", "WC_Inbox", new { id = item.ID })"><img src="~/Images/details.png" class="det-icon"> Details</a>
<a class="dropdown-item" href="@Url.Action("Delete", "WC_Inbox", new { id = item.ID })"><img src="~/Images/delete.png" class="det-icon"> Delete</a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<b>Employee Name:</b>
<p>
@Html.DisplayFor(modelItem => item.Employee.First_Name) @Html.DisplayFor(modelItem => item.Employee.Last_Name)
</p>
</div>
<div class="col-md-4">
<b>Encova ID:</b>
<p>
@Html.DisplayFor(modelItem => item.EncovaID)
</p>
</div>
<div class="col-md-4">
<b>Injury Date:</b>
<p>
@Html.DisplayFor(modelItem => item.Injury_Date)
</p>
</div>
<!--End row 1-->
</div>
<div class="col-md-4">
<b>Organization Number:</b>
<p>
@Html.DisplayFor(modelItem => item.Org_Number)
</p>
</div>
<div class="col-md-4">
<b>Injury Type:</b>
<p>
@Html.DisplayFor(modelItem => item.Injury_Type)
</p>
</div>
<div class="col-md-4">
<b>Status:</b>
<p>
@Html.DisplayFor(modelItem => item.Status)
</p>
</div>
<!--Options row-->
<div class="row"></div>
<div class="row">
<div class="col-md-4">
<p>
@Html.ActionLink("Edit", "Edit", new { id = item.ID })
</p>
</div>
<div class="col-md-4">
<p>
@Html.ActionLink("Details", "Details", new { id = item.ID })
</p>
</div>
<div class="col-md-4">
<p>
<a href="@Url.Action("Delete", "WC_Inbox", new { id = item.ID })" title="Delete" class="links">
<img alt="Delete" src="@Url.Content("~/Images/smallTrash.png")">
</a>
</p>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<p>
@Html.ActionLink("Work", "Work", new { id = item.ID }, new { @class = "btn btn-primary btn-large" })
</p>
</div>
</div>
</div>
</div>
我的 CSS
.det-icon {
width: 2rem;
}
.workCards {
overflow: hidden;
margin: 10px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 25px;
border: 1px solid #000000;
background: #f2f2f2;
width: 50%;
height: 300px;
}
.top-bg {
background-color: #bfbfbf
}
.text-right {
cursor: pointer
}
我遗漏了什么，或者我需要添加什么才能使下拉框看起来像工作示例？如果这是一个简单的解决方法，我深表歉意，我不擅长前端工作并尝试学习。
【问题讨论】：
-
删除
overflow: hidden;试试 -
溢出隐藏确实修复了它，但是顶部的灰色行超出了弯曲的边框。我不希望这样，所以我怎么能不让它溢出，同时合金下拉溢出？
-
然后只在圆形容器而不是子容器上应用背景；请看下面我的回答
标签： html css asp.net-mvc