我正在使用 CSS 的引導類來構建我的 asp.net MVC 專案，并且在我的視圖中按鈕離開螢屏，我必須滾動才能看到按鈕或縮小。如何使所有元素以任何比例適合螢屏？在我的查看頁面上，我有一個帶有唯一 tr / th 和按鈕的表格。我在 CSS 檔案中沒有邊距。
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table table-secondary" style="width: 100%">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Surname)
</th>
AND
<td>
<div class="w-75 btn-group" role="group">
<a asp-controller="Payments" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-dark"><i class="bi bi-pencil-square"></i> Edit</a>
<br/>
<a asp-controller="Payments" asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger" style="margin: 0px 0px 0px 5px"><i class="bi bi-trash-fill"></i> Delete</a>
</div>
</td>uj5u.com熱心網友回復：
您的表格根本不適合視口。您有長單詞作為單元格內容，并且有一排按鈕。所有這些加起來比可用的寬度更大。
你可以做幾件事：
- 增加頁面寬度。您似乎使用的是標準容器而不是流體容器。后者消除了頁面兩側的未使用空間。
- 在您的單元格中實作自動換行。
- 使用 Bootstrap 的回應式表格策略來允許表格水平滾動，而不是整個頁面。
- 重組您的表以減少行數。具有子行的嵌套表可用于包含操作按鈕。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/495347.html