时间戳

首页 > 解决方案 > 在 RenderBody() 内部，引导轮播图像未显示响应

html - 在 RenderBody() 内部，引导轮播图像未显示响应

问题描述

我正在尝试在索引主页内创建轮播响应图像，这些图像显示在公共布局页面内。但是当我减少高度 carousel-item div 时，索引 html 中没有显示完整的图像。即使降低 carousel-item div 的高度，如何将完整图像显示为 responsive ？

我在下面给出的代码

  1. _Layout.cshtml

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyCompany</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />

</head>

<body>
    <div class="container-fluid icon-top py-4 px-5">
        <div class="row">
             
        </div>

    </div>
    <header id="header">
        <nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <div class="body-container">
        @RenderBody()
    </div>

    <footer class="border-top footer text-muted">
        <div class="container" id>
            &copy; 2021 - MyCompany - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </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="~/js/all.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>

</html>

  1. 索引.cshtml

@{
    ViewData["Title"] = "Home Page";
}
<section id="home-heading">
    <div id="MyCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item carousel-image-1 active">

            </div>
            <div class="carousel-item  carousel-image-2">

            </div>
            <div class="carousel-item carousel-image-3">

            </div>
        </div>
        <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<!-- INFO SECTION -->
<section id="info" class="py-3>
    <div class=" container">
    <div class="row">
        <div class="col-md-8 align-self-center">
            <h3>Lorem Ipsum</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate eveniet blanditiis incidunt iusto
                corrupti illum cum laudantium ex sequi amet. ssfsdfs fjjerhehr uiewruhweuiruiewruyhyuewiry iweuyr
                ryewiuryiweuy. uieeryewi iuweriwe yb 7weyr7ewy87r7ywe8ry8wer8 we87r y87we78r7we8r
                7we87rwe87r87wer8werweuewof
                w8ueuwe88ur9we8r </p>
            <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
        </div>
        <div class="col-md-4">
            <img src="img/laptop.png" alt="" class="img-fluid">
        </div>
    </div>
    </div>
</section>

  1. 网站.css

 

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

#body-container {
    /*  */
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}


/* Provide sufficient contrast against white background */

a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}


/* Sticky footer styles
-------------------------------------------------- */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}


/* Sticky footer styles
-------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    /* Vertically center the text there */
}

.icon-top {
    background-color: chocolate;
}

.navbar .nav-link {
    font-size: 14px !important;
    text-align: right !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.navbar .nav-item.active {
    border-left: #444 3px solid;
}

.carousel-item {
    height: 800px;
}

.carousel-image-1 {
    background: url('../img/banner-1.jpeg');
    background-size: cover;
}

.carousel-image-2 {
    background: url('../img/banner-2.jpeg');
    background-size: cover;
}

.carousel-image-3 {
    background: url('../img/banner-3.jpeg');
    background-size: cover;
}

非常感谢波尔

标签： htmlcssasp.net-core

解决方案

将此添加到您的布局页面。

@RenderSection("style", required: false)

现在将您的轮播代码添加到任何查看页面。@section style{ "your bootstrap carousel code"}为此，您将成功地将轮播展示在您想要的位置。此外，轮播适合整个图像响应。

@section style{

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
            <div class="carousel-caption">
                <h3>Image 1</h3>
                <p>A happy image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
            <div class="carousel-caption">
                <h3>Image 2</h3>
                <p>A new image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
            <div class="carousel-caption">
                <h3>Image 3</h3>
                <p>An old image</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

}

推荐阅读