Question

M试图在Mvc Asp.net Visual Studio中建立一个网站。我尝试了一切，保证金：0; padding：0等，但我的容器类没有扩展到页面的整个宽度。右边有一些空白区域。我包含了我自己的样式表'style.css' - 将它捆绑在bundleconfig中的默认bootstrap.css文件之后。我也使用了reset.css文件。我不太了解bootstrap响应功能 - @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;

}

这是浏览器上的页面：

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

Answer 1

从我所看到的那一行可以很好地满足您的目标。只需删除您尝试覆盖引导程序CSS的任何自定义样式，然后取出div class =“container”。默认的Bootstrap容器将您的内容限制为1200px（带填充，15px带边）。在我看来，你实际上是在用你的自定义CSS阻碍自己，真的div class =“container”很可能是你的问题。

对于全宽而言，只需使用div class =“row”。

希望这会有所帮助。

容器类右侧的额外空白区域

1 个答案: