Question

这是我的 _Layout.cshtml 文件：

<!DOCTYPE html>

<html> 
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" asp-href-include="lib/bootstrap/dist/css/*.min.css" />
    <title>SportsStore</title> </head> <body>
    <div class="navbar navbar-inverse" role="navigation">
        <a class="navbar-brand" href="#">Faen as!!</a>
    </div>
    <div class="row panel">
        <div id="categories" class="col-xs-3">
         <h6>Side items</h6>
        </div>
        <div class="col-xs-8">
            @RenderBody()
        </div>
    </div> 
  </body>
</html>

最终结果看起来像第一张照片，但最终看起来像第二张照片。我不明白，为什么CSS只是部分渲染？

What it should look like

What it looks like

Answer 1

如果有人可以期待Bootstrap将自动使我的网页美观而无需编写单行css。右键单击您的页面（例如：SPORTS STORE部分），然后单击inspect。在这里查看css的错误，为什么它不具有约束力。有时您需要通过向HTML元素添加用户定义的类来覆盖bootstrap css，并且在CSS中添加重要的内容以正确呈现。例如，此处您的体育商店文本未显示。向该div或p或span添加一个类。在css中它就像是，

.myTextClassName
{
 color:white !important;
}
.myTopDivClassName
{
 background-color:black !important; 
 border-radius:4px !important;
}

CSS未完全呈现在ASP.NET Core中

1 个答案: