考慮以下代碼
@using App.Models
@model App.Models.AllPeopleViewModel
@{
ViewBag.Title = "Index";
}
<html>
<head>
</head>
<body>
@foreach (Customer person in Model.Content)
{
<div class="card border-primary text-center">
<div class="card-body">
<h5 class="card-title">@Html.DisplayFor(modelItem => person.name)</h5>
<p class="card-text">
@Html.DisplayFor(x => person.houseNameOrNumber), @Html.DisplayFor(x => person.Street),
@Html.DisplayFor(x => person.Town), @Html.DisplayFor(x => person.PostCode)
</p>
<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
</div>
<div class="card-footer text-muted">
Identifier - @Html.DisplayFor(modelItem => person.identifier)
</div>
</div>
}
</body>
</html>
具體線路
<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
I'm trying to hide this button. I've tried this, I've tried d.none, but neither of them work. Bootstrap cdn is included in my layout page and working, I know this as the cards are displaying correectly, but nothing hides that button! I want to be able to "unhide" it later on via javascript. I also want the hidden element to not effect the rendering of the page, untill I unhide it, if that makes sense!
Thanks you in advance, this one is driving me mental!
uj5u.com熱心網友回復：
問題出在標記內，目前的標記是：
<div class="visually-hidden" id="call_button">
</div>
<a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
意思是你隱藏了一個空的<div>. 要隱藏<a>，應該在里面.visually-hidden <div>。
此外，visually-hidden該類僅使元素不可見，但仍占用空間（對于僅對螢屏閱讀器可見的元素很有用）。要完全隱藏它，請改用d-none(or display: none;) 類。與 Bootstrap 無關，但有關visibility: hidden;vs的更多資訊display: none;：https ://www.geeksforgeeks.org/what-is-the-difference-between-visibilityhidden-and-displaynone/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449291.html
標籤：html css asp.net-mvc bootstrap-5
上一篇：PHP表格無法設定樣式
下一篇：如何向輸入添加浮動標簽？