ASP MVC默认应用程序生成删除空格

Question

当生成一个mvc项目时，它会有默认的主页面和部分视图，例如注册和登录视图。问题在于，主页面左侧和右侧都有默认的白色空间。我的问题是：这个边距空间代码写在哪里，如何删除它？看起来很简单，但我似乎找不到它。

Site.css保留其默认值。

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

我的 indes.cshtml 也非常简单：

@{
    ViewBag.Title = "Home Page";
}

<div id="mapa">
    <h1>ASP.NET</h1>
</div>

<div id="content">
    <div class="main-nav-wrapper">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">WebSiteName</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </nav>
    </div>
    </div>

我尝试向body-content类添加margin-left:0和margin-right:0，但它只是将子页面移动到左侧并保持其大小。

- user6321125

Answer 1

空格的存在是因为默认情况下，通过Visual Studio创建的ASP.NET MVC项目使用Bootstrap CSS Framework。我建议你学习如何使用它-它将使你的前端开发更加容易。

回答你的问题，你会发现带有“空白”内容的两侧嵌套在一个具有类container的

中。删除这个类并使用container-fluid将删除空白，并使容器全屏宽度。

不要尝试覆盖Bootstrap设置的容器margin，否则会破坏Bootstrap在其他地方的样式。

- glcheetham

Answer 2

在你的

_layout.cshtml

文件中，只需替换此标签即可。

<div class="container body-content">

通过这一个：

 <div class="container-fluid body-content">

- Tarek

Answer 3

你应该在Site.css中更改body内容的max-width。

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    max-width:100%;
}

- Alex Trueman