如何删除左填充或留空空间？在 asp.net 布局中？答案

【问题标题】：how to remove left padding or left empty space ? in asp.net layout?如何删除左填充或留空空间？在 asp.net 布局中？
【发布时间】：2021-09-15 20:43:58
【问题描述】：

我正在制作一个系统来查看网络上的数据库，但是

db列因为左边的空白而被埋在右边如何解决这个问题

应用所有的 css。

我知道是css的问题，我认为是_Layout的下层菜单有问题，但不知道具体是什么问题。

这个项目是 Blazor 服务器但我只使用剃须刀页面

当前页面cshtml

@page "/MyPage/Leader"
@model WebApplication1.Pages.Mypage.LeaderModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers


@{
    Layout = "_Layout";
}
  <tbody>
            @foreach (var item in Model.borad_tbl)
  ........

这是布局


<!DOCTYPE html>

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

</head>


<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                @*<a class="navbar-brand" asp-page="">MyPage</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 d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

css

网站CSS

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


a, .btn-link {
    color: #0366d6;
}

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

.content {
    padding-top: 1.1rem;

}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

【问题讨论】：

标签： html asp.net-core razor layout

【解决方案1】：

如果你想去掉左边的空白，试着在你的布局中加入如下代码：

<style>
    .container {
        margin-left:0px;    
    }
</style>

更新：

您需要确保将 css 添加到 layout:

<!DOCTYPE html>

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

</head>


<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                @*<a class="navbar-brand" asp-page="">MyPage</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 d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    </body>
</html>
<style>
    .container {
        margin-left:0px;    
    }
</style>

使用 css：

【讨论】：

谢谢你回复它不起作用所以我编辑问题
你在哪里添加代码？我在我的项目中测试，它可以工作。空白是因为.container中的margin-left:auto;。