最後,我才得以完成設計部分。下面的代碼工作對我來說:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topmenu">
<div class="container-fluid">
<div class="navbar-header">
<img src="~/Content/img/logo.png" style="padding-top:6px" class="pull-left" />
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#one">Menu1</a>
</li>
<li>@Html.ActionLink("Menu2", "Index", "Home")</li>
<li>@Html.ActionLink("Menu3", "Index", "Home")</li>
<li>@Html.ActionLink("Menu4", "Index", "Home")</li>
</ul>
</div>
</div>
<div class="panel navbar-inverse" id="submenu">
<ul class="nav navbar-nav collapse" id="one">
<li>@Html.ActionLink("Submenu1", "Submenu1", "Submenu1Controller")</li>
<li>@Html.ActionLink("Submenu2", "Submenu2", "Submenu2Controller")</li>
<li>@Html.ActionLink("Submenu3", "Submenu3", "Submenu3Controller")</li>
<li>@Html.ActionLink("Submenu4", "Submenu4", "Submenu4Controller")</li>
<li>@Html.ActionLink("Submenu5", "Index", "Home")</li>
</ul>
</div>
</nav>
<div class="container-fluid body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My Website</p>
</footer>
</div>
</body>
slight adjustments to the .panel css in bootstrap.css file to make
.panel {
margin-bottom: 0px;
background-color: #fff;
border: .5px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
我從20像素和邊境改變了下邊距爲0px從1px的
到.5px