【发布时间】：2020-05-31 08:05:02
【问题描述】：
在 ASP.net Core MVC 3.1 堆栈上创建了一个 Web 应用程序。从手机以 360 x 740 的分辨率查看时，有些网页被裁剪（在标题和表格中）。从平板电脑或 PC 上查看时，一切都很好。我试图同时更改 _Layout 文件和 View 文件。但没有积极作用。
When viewing from a mobile cut in "Head" and below:
_Layout.cshtml：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" asp-href-include="lib/bootstrap/dist/css/*.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="~/js/a076d05399.js"></script>
</head>
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left w3-indigo" style="width:200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large w3-hover-white" onclick="w3_close()">×</button>
<center><h1>HOMIE</h1></center>
<hr>
<a asp-area="" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white">
<i class="fa fa-fw fa-lg fa-home"></i> Домой
</a>
<button class="w3-button w3-block w3-left-align w3-hover-white" onclick="myAccSeriesFunc()">
<i class="fa fa-film fa-fw fa-lg"></i> Сериалы <i class="fa fa-caret-down"></i>
</button>
<div id="seriesAcc" class="w3-hide w3-light-gray w3-card">
<a asp-area="Series" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white">
<i class="fa fa-video fa-fw" aria-hidden="true"></i> Просмотр
</a>
<a asp-area="Series" asp-controller="Home" asp-action="ArchMovies" class="w3-bar-item w3-button w3-hover-white">
<i class="fa fa-fast-backward fa-fw" aria-hidden="true"></i> Архив
</a>
</div>
<a asp-area="Cigars" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white">
<i class="fas fa-joint fa-lg"></i> Сигары
</a>
<a method="post" asp-area="Identity" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white"><i class="fas fa-sign-in-alt fa-lg"></i> Выход</a>
</div>
<!-- Page Content -->
<div class="w3-main" style="margin-left:200px">
<div class="w3-indigo">
<button class="w3-button w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
<div class="w3-container w3-indigo">
<h1>@ViewBag.HeaderTitle</h1>
</div>
</div>
<p></p>
<div class="w3-container">
@RenderBody()
</div>
<script>
function myAccSeriesFunc() {
var x = document.getElementById("seriesAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-white";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-white", "");
}
}
function myAccAdminFunc() {
var y = document.getElementById("adminAcc");
if (y.className.indexOf("w3-show") == -1) {
y.className += " w3-show";
y.previousElementSibling.className += " w3-white";
} else {
y.className = y.className.replace(" w3-show", "");
y.previousElementSibling.className =
y.previousElementSibling.className.replace(" w3-white", "");
}
}
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</div>
</body>
</html>Index.cshtml：
@using Homie.Models
@model IndexViewModel
@addTagHelper *, Homie
@{
ViewBag.Title = "Список выкуренных сигар";
ViewBag.HeaderTitle = "Сигары - - - - [ История ]";
}
<style>
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: sandybrown;
}
</style>
<a asp-action="Create" asp-controller="Home" asp-area="Cigars"
class="btn btn-primary"
role="button">Добавить</a>
<p></p>
<form method="get">
<div class="form-inline">
<label>Название: </label>
<input name="name" value="@Model.FilterViewModel.SelectedName" class="form-control" />
<label>Формат: </label>
<select name="format" asp-items="Model.FilterViewModel.Formats" class="form-control"></select>
<input type="submit" value="Фильтр" class="btn btn-outline-dark" />
</div>
</form>
<p></p>
<div>
<label>Количество сигар: @Model.PageViewModel.CountPages</label>
</div>
<table class="table table-bordered table-striped table-sm">
<tr>
<th>
<a asp-action="Index"
asp-route-sortOrder="@(Model.SortViewModel.NameSort)"
asp-route-name="@(Model.FilterViewModel.SelectedName)"
asp-route-format="@(Model.FilterViewModel.SelectedFormat)">Название</a>
</th>
<th>Страна</th>
<th>Цена</th>
<th>Рейтинг</th>
<th>
<a asp-action="Index" asp-route-sortOrder="@(Model.SortViewModel.FormatSort)"
asp-route-name="@(Model.FilterViewModel.SelectedName)"
asp-route-format="@(Model.FilterViewModel.SelectedFormat)">Формат</a>
</th>
<th></th>
</tr>
@foreach (var p in Model.Cigars)
{
<tr>
<td>@p.Name</td>
<td>@p.Country</td>
<td>@p.Price</td>
<td>@p.Rating</td>
<td>@p.Shape</td>
<td>
<a asp-action="Edit" asp-controller="Home" asp-route-id="@p.Id" class="btn btn-success"
role="button">Изменить</a>
<a asp-action="Delete" asp-controller="Home" asp-route-id="@p.Id" class="btn btn-danger"
role="button">Удалить</a>
</td>
</tr>
}
</table>
<p></p>
<page-link page-model="Model.PageViewModel" page-action="Index"
page-url-name="@(Model.FilterViewModel.SelectedName)"
page-url-company="@(Model.FilterViewModel.SelectedFormat)"
page-url-sortorder="@(Model.SortViewModel.Current)"></page-link>【问题讨论】：
标签： html css razor asp.net-core-mvc