如何移除ASP.NET项目default.aspx页面的左右边距？

你用Visual Studio Web应用程序标准模板创建的ASP.NET项目，当前default.aspx页面和菜单的左右两侧存在大量空白边距，修改bootstrap.css未解决问题，以下是具体解决方案：

问题根源 #

模板里的导航栏和内容区域都使用了Bootstrap的container类，这个类默认会设置左右内边距和固定宽度，这就是两侧空白的来源。直接修改bootstrap.css无效，大概率是因为ASP.NET的Bundle缓存机制，或者你修改的不是项目实际加载的CSS文件。

解决方案 #

方案1：替换容器类为全屏宽度类 #

Bootstrap提供了container-fluid类，它会让元素占满屏幕宽度，没有默认的左右内边距。只需修改Site.master中的两处container即可：

修改后的Site.master关键代码：

<!-- 导航栏部分 -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <!-- 把container换成container-fluid -->
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="more options">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" runat="server" href="~/")>Application name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a runat="server" href="~/")>Home</a></li>
                <li><a runat="server" href="~/About")>About</a></li>
                <li><a runat="server" href="~/Contact")>Contact</a></li>
                <li><a runat="server" href="~/Contact")>Hello</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 内容区域部分 -->
<!-- 把container换成container-fluid -->
<div class="container-fluid body-content">
    <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>
    <hr />
    <footer>
        <p>&amp;copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
    </footer>
</div>

方案2：自定义CSS覆盖默认样式 #

如果不想替换容器类，可以在页面头部添加自定义CSS（放在Bootstrap样式之后加载），覆盖container的默认样式：

在Site.master的<head>标签内添加：

<style>
    /* 移除container的左右边距和固定宽度 */
    .container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    /* 避免固定导航栏遮挡内容 */
    body {
        padding-top: 50px; /* 数值对应导航栏高度，可根据实际调整 */
    }
</style>

注意：自定义CSS一定要放在Bootstrap样式的后面，这样才能正确覆盖默认样式。

内容的提问来源于stack exchange，提问作者aza01