Bootstrap 3+ASP.NET MVC页面无法占满浏览器宽度的解决求助

嘿，这问题我之前也碰到过！原因其实很简单——Bootstrap 3的默认容器设置导致的，咱们一步步来解决：

1. 修改布局页的容器类 #

你的页面用了共享布局_Layout.cshtml，里面大概率用了.container类，这个类是固定宽度且带左右自动留白的，用来让页面内容居中。要占满全屏，咱们把它换成.container-fluid：

打开~/Views/Shared/_Layout.cshtml，找到类似这样的代码：

<div class="container">
    @RenderBody()
</div>

改成：

<div class="container-fluid">
    @RenderBody()
</div>

这一步是最关键的，.container-fluid是Bootstrap专门用来做全屏流式布局的容器，宽度会自动占满浏览器的100%宽度，没有左右的自动margin。

2. 清除页面默认边距（可选） #

如果改完容器后还有一点点留白，那可能是浏览器给body标签加了默认的margin，你可以在项目的自定义CSS文件里加上这段代码：

body {
    margin: 0;
    padding: 0;
}

这样就能彻底清除页面最外层的默认留白了。

3. 你的页面代码适配（无需修改，但可以确认） #

你的CSHTML代码里的面板、表格都能很好地适配.container-fluid，DataTable的autoWidth: true设置也能让表格自动占满容器宽度，不需要额外调整。

为什么会有留白？ #

Bootstrap 3的.container类设计初衷是让内容在不同屏幕尺寸下保持合适的固定宽度（比如桌面端1170px），并且通过margin: 0 auto让内容居中，所以左右会出现留白；而.container-fluid会始终保持100%宽度，完全贴合浏览器边缘。

内容的提问来源于stack exchange，提问作者francisco Mc Manus