Boostrap4的旋轉木馬在索引頁上沒有顯示出來 -有解無憂

我遇到了一個問題，就是如何讓我的圖片轉盤在我的索引頁上顯示出來。我目前正試圖將我用php制作的一個舊網站改造成ASP.Net Core框架。到目前為止，一切都很順利，但在我的索引頁上添加了一些HTML和引導元素后，當應用程式運行時，這些元素似乎都沒有顯示。

索引頁：

@{
    ViewData["Title"] = "Home Page"。
}


< div id="MagicCarousel"  class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
        < li data-target="#MagicCarousel"/span> data-slide-to="0" class="active"> </li>>
        < li data-target="#MagicCarousel"/span> data-slide-to="1"/span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="2" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="3" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="4" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="5" /span>> </li>>
    </ol> 
    < div class="carousel-inner" role="listbox">/span>
        <div class="carousel-item"/span>>
            <img class="d-block w-100" src="~/Images/Mountains"。 jpg" alt="first-slide"  />
            <div class="carousel-caption active">
                <h3>山巒</h3>
                <p>（第一張幻燈片）</p>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100" src="~/Images/mtn. jpg" alt="first-slide"  />
                <div class="carousel-caption"> 
                    <h3>Mountain</h3>/span>
                    <p>（第二張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100" src="~/Images/nature"。 jpg" alt="first-slide" />。
                <div class="carousel-caption"> 
                    <h3>自然</h3> 
                    <p>（第三張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100" src="~/Images/rainier.jpg" src="hljs-string">。 jpg" alt="first-slide"  />
                <div class="carousel-caption"> 
                    <h3>/span>Mt. Rainier</h3>/span>
                    <p>（第四張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                 png" alt="first-slide"  />
                <div class="carousel-caption"> 
                    <h3>Red</h3> 
                    <p>（第五張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100" src="~/Images/snow. png" alt="first-slide"  />
                <div class="carousel-caption"> 
                    <h3>雪</h3> 
                    <p>（第6張幻燈片）</p>
                </div>/span>
            </div>/span>
            < a class="carousel-control-prev" href="#MargicCarousel" role="button" data-slide="prev"> 
                <span class="carousel-control-prev-icon"/span>> </span>>
                <span class="sr-only"/span>> 上一頁</span> 
            </a>/span>
            < a class="carousel-control-next" href="#MargicCarousel" role="button" data-slide="Next"> 
                <span class="carousel-control-next-icon"/span>> </span>>
                <span class="sr-only"/span>> 下一步</span>>
            </a>/span>
        </div>/span>
    </div>/span>
</div>/span>

渲染的HTML：

<html lang="en"/span>>
<head>/span>
    <meta charset="utf-8">/span>
    <meta name="viewport" content="width=device width, initial-scale=1. 0">
    <title>主頁 - NWClothingCo</title> 
    < link rel="styleheet" href="/lib/bootstrap/dist/css/bootstrap。 min.css">
    <link rel=" stylesheet" href="/css/site. css">
    <link rel="preconnect"  href="https://fonts. googleapis.com">
    <link rel="preconnect"/span> href="https://fonts. gstatic.com" crossorigin=">
    <link href="https://fonts.googleapis.com/css2? family=Roboto:wght@300&amp;display=swap" rel="styleheet"> 
    <link href="https://cdnjs.cloudflare. com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="styleheet"> 
</head> 
<body> 
    <header> 
        <div class="menu-bar"> 
            <nav class="navbar navbar-expand-lg navbar-light" >
                <a class="navbar-brand" href="/"/span>> <img src="/Images/logo2. png"></a>>
                < button class="navbar-toggler"  型別="按鈕" data-toggle="collapse" data-target="#navbarNav" aria- controls="navbarNav"/span> aria-expanded="false"/span>> 
                    <i class="fa fa-bars"/span>> </i>>
                </button> 
                < div class="collapse navbar-collapse" id="navbarNav"> 
                    <ul class="navbar-nav ml-auto">/span>
                        <li class="nav-item"/span>>
                            < a class="nav-link main-nav" href="/"> 首頁</a>。
                        </li>/span>
                        <li class="nav-item"> 
                            < a class="nav-link main-nav" href="/home/Privacy"> Privacy</a>
                        </li>/span>
                        


<li class="nav-item"> 
    < a id="manage" class="nav-link main- nav" title="Manage" href="/Identity/Account/Manage" > Hello [email protected]! </a>Hello!
</li>/span>
<li class="nav-item"> 
    < form id="logoutForm"  class="form-inline"/span> action="/Identity/Account/Logout? returnUrl=/" method="post" >
        < button id="logout" type="submit" class="nav-link btn btn-link" > 注銷</按鈕>
    < input name="__RequestVerificationToken" type="hidden" value="CfDJ8N059oDIAp1OkI1ZLht5jpf5a2KfqSzNiQVu06OzCrVAj27nh8D87s8M7ySeuYfAprtfHoo6CSIEaPDJ8O_2J- fHrCH2CcWp3IJGRETSfMtlfVCQ0AnynmfyGet_Fp8gyyMN78Tq1V_9NgAY2RpqSz34m9-ItoiM1xtXdpjd5B7QEGZbLBWD7eym5EkjfgpZNA"/span>>。 </form>>
</li> 


                    </ul>/span>
                </div>/span>
            </nav> 
        </div>/span>
    </header>/span>


    <div class="container"> 
        < main role="main" class="pb-3"> 
            

< div id="MagicCarousel"  class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
        < li data-target="#MagicCarousel"/span> data-slide-to="0" class="active"> </li>>
        < li data-target="#MagicCarousel"/span> data-slide-to="1"/span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="2" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="3" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="4" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="5" /span>> </li>>
    </ol> 
    < div class="carousel-inner" role="listbox">/span>
        <div class="carousel-item"/span>>
            <img class="d-block w-100" src="/Images/Mountains"/span>。 jpg" alt="first-slide">。
            <div class="carousel-caption active">/span>
                <h3>山巒</h3>
                <p>（第一張幻燈片）</p>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100" src="/Images/mtn. jpg" alt="first-slide">。
                <div class="carousel-caption"/span>>
                    <h3>Mountain</h3>/span>
                    <p>（第二張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                 jpg" alt="first-slide">。
                <div class="carousel-caption"/span>>
                    <h3>自然</h3> 
                    <p>（第三張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                 jpg" alt="first-slide">。
                <div class="carousel-caption"/span>>
                    <h3>/span>Mt. Rainier</h3>/span>
                    <p>（第四張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100" src="/Images/red" src==src  alt="first-slide"> 
                <div class="carousel-caption"/span>>
                    <h3>Red</h3> 
                    <p>（第五張幻燈片）</p>
                </div>/span>
            </div>/span>
            <div class="carousel-item"> 
                <img class="d-block w-100"  src="/Images/snow. png" alt="first-slide"> 
                <div class="carousel-caption"/span>>
                    <h3>雪</h3> 
                    <p>（第6張幻燈片）</p>
                </div>/span>
            </div>/span>
            < a class="carousel-control-prev" href="#MargicCarousel" role="button" data-slide="prev"> 
                <span class="carousel-control-prev-icon"/span>> </span>>
                <span class="sr-only"/span>> 上一頁</span> 
            </a>/span>
            < a class="carousel-control-next" href="#MargicCarousel" role="button" data-slide="Next"> 
                <span class="carousel-control-next-icon"/span>> </span>>
                <span class="sr-only"/span>> 下一步</span>>
            </a>/span>
        </div>/span>
    </div>/span>
</div>/span>

        </main> 
    </div> 

    <footer class="border-top footer text-muted" >
        <div class="container"> 
            ? 2021 - NWClothingCo - <a href="/Home/Privacy"/span>> Privacy</a>
        </div>/span>
    </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? v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>/span>
    
<script src="/_framework/aspnetcore-browser-refresh。 js"></script>。

</body> 
</html>

下面是顯示的內容。

uj5u.com熱心網友回復：

將這個添加到你的Layout頁面的渲染HTML中：-

@RenderSection("style", required: false)/code>


現在把你的旋轉木馬代碼像@Yiyi You一樣添加到任何視圖頁面。在@section style{ "your bootstrap carousel code"}下，為此，你將成功地在你想要的地方顯示你的旋轉木馬。同時，旋轉木馬適合整個頁面。
Index.cshtml
@section style{

< div id="MagicCarousel"  class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
        < li data-target="#MagicCarousel"/span> data-slide-to="0" class="active"> </li>>
        < li data-target="#MagicCarousel"/span> data-slide-to="1"/span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="2" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="3" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="4" /span>> </li>>
        < li data-target="#MagicCarousel" data-slide-to="5" /span>> </li>>
    </ol> 
    < div class="carousel-inner" role="listbox">/span>
        <div class="carousel-item active">/span>
            <img class="d-block w-100" src="~/Images/Mountains"。 jpg" alt="first-slide"  />
            <div class="carousel-caption active">
                <h3>山巒</h3>
                <p>（第一張幻燈片）</p>
            </div>/span>
        </div>/span>
        <div class="carousel-item"> 
            <img class="d-block w-100" src="~/Images/mtn. jpg" alt="first-slide"  />
            <div class="carousel-caption"> 
                <h3>Mountain</h3>/span>
                <p>（第二張幻燈片）</p>
            </div>/span>
        </div>/span>
        <div class="carousel-item"> 
            <img class="d-block w-100" src="~/Images/nature"。 jpg" alt="first-slide" />。
            <div class="carousel-caption"> 
                <h3>自然</h3> 
                <p>（第三張幻燈片）</p>
            </div>/span>
        </div>/span>
        <div class="carousel-item"> 
            <img class="d-block w-100" src="~/Images/rainier.jpg" src="hljs-string">。 jpg" alt="first-slide"  />
            <div class="carousel-caption"> 
                <h3>/span>Mt. Rainier</h3>/span>
                <p>（第四張幻燈片）</p>
            </div>/span>
        </div>/span>
        <div class="carousel-item"> 
             png" alt="first-slide"  />
            <div class="carousel-caption"> 
                <h3>Red</h3> 
                <p>（第五張幻燈片）</p>
            </div>/span>
        </div>/span>
        <div class="carousel-item"> 
            <img class="d-block w-100" src="~/Images/snow. png" alt="first-slide"  />
            <div class="carousel-caption"> 
                <h3>雪</h3> 
                <p>（第6張幻燈片）</p>
            </div>/span>
        </div>/span>

    </div>/span>
    < a class="carousel-control-prev"  href="#MagicCarousel" role="button" data-slide="prev"> 
        <span class="carousel-control-prev-icon"/span>> </span>>
        <span class="sr-only"/span>> 上一頁</span> 
    </a>/span>
    < a class="carousel-control-next"  href="#MagicCarousel" role="button" data-slide="Next"> 
        <span class="carousel-control-next-icon"/span>> </span>>
        <span class="sr-only"/span>> 下一步</span>>
    </a>/span>
</div>/span>

}







        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/net/311765.html
      標籤：
      上一篇：在.NetCore(.Net5)中使用代碼先行遷移將ASPNetUsers主鍵資料型別從nvarchar更新為bigint。
下一篇：如何在jquery.validation中使用另一個屬性來代替name屬性？