ASP.NET视图侧边栏左侧空白，页面宽度超100%问题求助

我来帮你排查这个让人头疼的布局问题！结合你提到的Bootstrap引用和侧边栏场景，给你几个常见的排查方向和修复方案，你可以逐个试一下：

1. 清除浏览器默认内外边距 #

浏览器默认会给html、body标签加上margin或padding，这是最容易导致页面超出100%宽度的元凶。可以在自定义CSS最开头加上这段代码：

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 紧急情况下可以先隐藏横向滚动，不过最好找到根源再去掉 */
}

2. 检查侧边栏的盒模型与定位 #

如果你的侧边栏用了浮动或绝对定位，要注意这几个细节：

• 若用浮动，记得给父容器加清除浮动的样式（比如clearfix类），避免高度塌陷带动整体布局偏移；
• 若用绝对定位，确认父元素设置了position: relative作为参考容器，且侧边栏的left值不要设成负数或错误数值；
• 开启box-sizing: border-box让内边距和边框算在宽度内，避免宽度溢出：

.sidebar {
    box-sizing: border-box;
    width: 250px; /* 你的侧边栏实际宽度 */
    padding: 15px;
    /* 其他样式 */
}

3. Bootstrap布局的常见坑 #

看你引入了Bootstrap，要注意栅格系统的规则：

• row类默认有margin-left: -15px; margin-right: -15px，必须放在container或container-fluid内部，后者会自动加左右padding抵消这个负margin；
• 如果侧边栏用了Bootstrap的col-*栅格列，确保所有列的宽度总和不超过12，且没有额外自定义margin/padding导致宽度溢出。

4. 排查其他溢出元素 #

有时候不是侧边栏本身的问题，而是页面里的其他元素（比如超宽图片、无换行的长文本）撑爆了容器。你可以按F12打开浏览器开发者工具，选中<body>标签查看实际宽度，再逐层排查哪个元素导致了溢出。

给你一个完整的参考布局示例（结合Bootstrap）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Profile</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .sidebar {
            box-sizing: border-box;
            width: 250px;
            background-color: #f8f9fa;
            padding: 20px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
        }
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h3>侧边栏</h3>
        <ul class="list-unstyled">
            <li><a href="#">个人信息</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h1>个人主页</h1>
        <p>这里是你的主内容区域...</p>
    </div>
</body>
</html>

你可以把自己的代码和这个示例对比，重点排查内外边距、盒模型和定位的问题，应该能快速解决滚动条的问题。

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