asp mvc default application generated remove white spaces

问题

So when a mvc project is genereted it has his default master page and partial views like the register and login views.The problem is that the master page is genereted with default white spaces on the left side of the page and on the right side.My question is : Where is that margin space code written and how to remove it?As simple as it looks I just can't seem to find it.

Site.css is left with its default values:

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;
}

And my indes.cshtml is alsaw pretty simple:

@{
    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>

I tried adding margin-left:0 and margin-right:0 to the body-content class but it just moves the child page to the left and maintains the size of it.

回答1:

The whitespace is there because, by default, an ASP.NET MVC project created through Visual Studio uses the Bootstrap CSS Framework. I recommend you learn to use it - it will make your front-end development magnitudes easier.

Addressing your question, you'll find that the content with the "whitespace" either side is nested in a div which has the class container. Removing this class and using container-fluid will remove the whitespace and make the container full-screen-width instead.

Don't try to override the margin set on containers by Bootstrap, you'll ruin Bootstrap's styling elsewhere.

回答2:

Or in your

_layout.cshtml

you just replace this tag

<div class="container body-content">

by this one:

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

回答3:

You should change max-width in body content Site.css

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

来源：https://stackoverflow.com/questions/37465586/asp-mvc-default-application-generated-remove-white-spaces

标签

html

css

asp.net-mvc

bootstrap-modal