我在将 navbarmenu 与 pagecontent 对齐时遇到了一点问题，因此它非常适合 herizonal。现在它看起来像这张图片:
如您所见，我希望页面内容为 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;
}
希望有人能告诉我应该看什么，因为我已经尝试了我所知道的一切..
最佳答案
我相信导航 div 上的 container-fluid 是罪魁祸首，正如对 Container-fluid vs .container 的接受答案中所讨论的那样
您可能想考虑使用 Bootstrap 示例之一，例如 Sticky Footer Navbar .查看该页面上的源代码，您可以获取所需的部分并开始调整该 HTML 以满足您的需要。
关于css - Bootstrap 3 网格系统将导航栏菜单与页面内容对齐并设置页面内容大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31835542/