容器类右侧的额外空白答案

【问题标题】：Extra White space to the right of container class容器类右侧的额外空白
【发布时间】：2016-03-16 18:13:51
【问题描述】：

M 试图在 Mvc Asp.net Visual Studio 中构建网站。我什么都试过了，margin:0; padding:0 等，但我的容器类没有扩展到页面的整个宽度。它的右边有一些空白区域。我包含了我自己的样式表“style.css”——在 bundleconfig 中的默认 bootstrap.css 文件之后将其捆绑。我也使用了 reset.css 文件。我对引导响应功能没有太多想法-@media，所以我不知道 bootstrap.css 中的任何一个是否导致问题。这是我的代码： _Layout.cshtml

<body>

    <div class="header">
        <div class="container">

            <div class="row">
                <div class="col-md-2">
                    <img class="logo" src="~/Content/Images/logo.png" />
                </div>
                <div class="col-md-10">
                    <h1><span>Kerala</span>-The Experience of a lifetime</h1>
                </div>
            </div>

            <div class="menu">
                <ul class="nav">
                    <li class="active" role="presentation"><a href="#">Home</a></li>
                    <li role="presentation"><a href="#">Travel Information</a></li>
                    <li role="presentation"><a href="#">Seasons</a></li>
                </ul>
            </div>

        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

index.cshtml

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

<div class="main">
    <div class="container">

    </div>
</div>

style.css

html,body {
    margin:0;
    padding:0;
}

.header{
    background-color:#1dbbd3;
    width:100%;

    margin:0;
    padding:0;
}
.container{
    width:100%;
    margin:0;
    padding:0;
    border:1px solid black;
}
.header h1{
    font-size:24px;
    font-style:oblique;
    margin-top:0;
    padding-top:0;
}
.header h1 span{
    font-size:64px;
}
.header .row img{
    height:80px;
    width:100px;
    margin:0;
    padding:0;
}
.header .row .col-md-10{
    color:#1BDA1B;
    text-align:center;
    text-shadow: 4px 4px 4px #aaa;
    /*border:1px solid blue;*/
    margin-left:0;
    padding-bottom:0;
}
.header .menu ul{
    list-style-type:none;
    display:inline-block;
}
.header .menu ul li{
    display:inline-block;
    color:#0d4869;
    margin-right:20px;
}
.header .menu ul li.active{
    background-color:#1BDA1B;
    color:#0d4869;

}
.header .menu li a:hover{
    background-color:#1BDA1B;
}

/**********************Main**********************/
.main{
    background: url(/Content/Images/places8-bekalfort.jpg) no-repeat center center; 
    background-size: cover;
    margin:0;
    padding:0;
    width:100%;
    height:500px;

}

这是浏览器上的页面：

屏幕上的黑线是容器的边框，它的右边明显有边距。请帮助解决此问题。卡了这么久。

【问题讨论】：

你的代码对我有用，没有css bootstrap，你把你的代码放在jsfiddle.net

标签： html css twitter-bootstrap

【解决方案1】：

据我所见，该行适合您想要实现的目标。只需删除您尝试覆盖引导 CSS 的任何自定义样式，然后取出 div class="container"。默认的 Bootstrap 容器将您的内容限制为 1200 像素（带内边距，带侧边 15 像素）。在我看来，您实际上是在使用自定义 CSS 来阻碍自己，而实际上 div class="container" 很可能是您的问题。

对于全宽，只需使用 div class="row"。

希望这会有所帮助。

【讨论】：

非常感谢有关默认引导容器的信息。这绝对是容器的问题，但我无法避免使用它，因为项目的其他部分需要它。我通过设置 max-width:1366 (for chrome) 解决了这个问题。