Я пытаюсь отобразить запись из базы данных в сетке с помощью карты bootstrap. Он работает нормально, но когда я показываю запись на странице по горизонтали, страницу можно прокручивать по горизонтали, даже если карточка уже умещается на странице. Я пытаюсь настроить список карточек в соответствии с размером тела страницы и, чтобы избежать горизонтальной прокрутки вправо, будет приветствоваться любая помощь. Я предполагаю, что тело рендеринга превышает размер заголовка. Он должен быть того же размера, что и панель навигации. Мой код приведен ниже. Мой код также приведен в github: ppp3pol / publishing
_layout page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - LibraryBooks</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow">
<div class="container">
<a href="#home" class="navbar-brand">
<img src="img/mlogo.png" width="50" height="50" alt="">
<h3 class="d-inline align-middle">Mizuxe</h3>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#authors" class="nav-link">Meet The Authors</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
@RenderBody()
<footer id="main-footer" class="text-center p-4">
<div class="container">
© 2020 - LibraryBooks
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://kit.fontawesome.com/e19c476714.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
домашняя страница
@model IEnumerable<Publication.Models.BookIndex>
@{
ViewData["Title"] = "Home Page";
}
<section id="showcase">
<div class="primary-overlay text-white">
</div>
</section>
<div class="pt-3">
<section id="newsletter" class="bg-white text-white py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control form-control-lg mb-resp" placeholder="Enter Name">
</div>
<div class="col-md-4">
<input type="email" class="form-control form-control-lg mb-resp" placeholder="Enter Email">
</div>
<div class="col-md-4">
<button class="btn btn-primary btn-lg btn-block">
<i class="fas fa-envelope-open-o"></i> Subscribe
</button>
</div>
</div>
</div>
</section>
</div>
<div class="row py-3">
@foreach (var bookIndex in Model)
{
<section class="col-lg-3 col-md-6">
<div class="card">
<img src="@bookIndex.ImageUrl" class="img-fluid card-img-top " />
<div class="card-body">
<h4 class="card-title">@bookIndex.Title</h4>
<small class="text-muted">Written by @bookIndex.AuthorName</small>
<hr>
<p class="card-text">
@bookIndex.StoryOutLine
</p>
</div>
</div>
</section>
}
</div>