在 _layout.cshtml 页面制作一个小的圆形容器
[英]Make a small rounded container in _layout.cshtml page
问题描述
I have the following code on my _Layout.cshtml page:
我的 _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"] - FeeCalc</title> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="~/FeeCalc.styles:css" asp-append-version="true" /> </head> <body style="background-color:cadetblue"> <header> <nav class="navbar" style="background-color; #264653: position;absolute: top;0px: left;50%: transform;translateX(-50%): width;100%: "> <div class="container-fluid"> <span class="navbar-brand" style="display;flex:"> <a href="https.//www.google.com/"> <img src="~/Img/Infoorange:png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" /> </a> <span style="font-size;25px:color;white:"><span style="color:#e9c46a">SpringField</span><br />company Name</span> </span> </div> </nav> </header> <div class="container-bg"> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div> </div>
This page looks like this:该页面如下所示：
I want to put a container in center of white color just like this:我想把一个容器放在白色的中心，就像这样：
so that I can put HTML control inside the white space.这样我就可以将 HTML 控件放入空白区域。 In order to achieve this.为了达到这个目的。 I tried to write the following code:我尝试编写以下代码：
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container" >
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
</div>
nothing seems to appear on the page.页面上似乎没有任何内容。 the page looks the same with no color on the container.页面看起来一样，容器上没有颜色。 How can I make a white color center container on this blue color page.我怎样才能在这个蓝色页面上制作一个白色的中心容器。
Any help will be greatly appreciated.任何帮助将不胜感激。
1 个解决方案
解决方案1
1 已采纳 2023-01-19 03:24:28
I checked your code, and it seems your container-bg class with the white colored background under navbar-brand class. Add margin-top: 100px;我检查了你的代码，你的容器背景似乎是 class，导航栏品牌class 下有白色背景。添加margin-top: 100px; to container-bg class.到容器-bg class。
<div class="container-bg">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%; margin-top: 100px; height: 90px;" class="container">
<main role="main" class="pb-3">@RenderBody()</main>
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.