Bootstrap 3 gridsystem 将导航栏菜单与页面内容对齐并设置页面内容大小答案

【问题标题】：Bootstrap 3 gridsystem align navbar menu with pagecontent & set the pagecotent sizeBootstrap 3 gridsystem 将导航栏菜单与页面内容对齐并设置页面内容大小
【发布时间】：2015-08-05 22:56:40
【问题描述】：

我在将导航栏菜单与页面内容对齐时遇到了一点问题，因此它非常适合横向。现在看起来像这样的图片：

如您所见，我希望页面内容为 950 像素（空白），外部的灰色是整体背景色。我只尝试创建全尺寸页面，所以这是正确的方法，宽度：950px;？还是有更聪明的方法可以将所有页面的全屏强制设为 950 像素？

我想做的是让它看起来像这个页面（布局）：

您可以在以下位置查看完整页面：This page

如您所见，导航栏菜单适合并与页面内容对齐，即使您尝试调整它的大小。

代码（_Layout）：

 <body>
<div class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>


    <div class="row">
        <div class="navbarunder">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
</div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
</div>

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

CSS 文件：

 .indexpage {
background-color: white;    
height: 500px;
margin-left:auto;
margin-right:auto;
}

 @media (min-width: 1000px) {
.indexpage {
    width: 950px;
}
}

 .navbar-inverse {
background-color: white;
border-width: 0px;
border-bottom: thin solid #95a5a6;

}

.navbarunder {
font-variant: small-caps;
border-top: thick solid #003665;
border-width: 8px;
}

希望有人能告诉我应该看什么，因为我已经尝试了我所知道的一切......

【问题讨论】：

标签： css asp.net twitter-bootstrap

【解决方案1】：

我相信您导航上的container-fluid div 是罪魁祸首，正如在接受的Container-fluid vs .container 答案中所讨论的那样

您可能需要考虑使用 Bootstrap 示例之一，例如 Sticky Footer Navbar。查看该页面上的源代码，您可以获取所需的部分并开始调整该 HTML 以满足您的需求。

【讨论】：

好吧，我已经知道可以这样完成.. 但是如果我希望页面内容大小固定为宽度 = 950px？我想删除页面的大小调整，直到它实际上应该进入 ipad 模式。