昨日から、私は自分のウェブサイトの一番上に特定の固定ヘッダーをデザインしようとしていました。BootStrap固定ヘッダートグルボタン付き
私はブートストラップの初心者ですが、ブートストラップを使用して画面上部に固定ヘッダーをデザインする方法を知っています。しかし、私は、次のWebサイトのヘッダーにsimlarあるべきトグルオプション使用して設計ヘッダーを知りたい：上記のサイトで
https://www.sitepoint.com/community/t/horizontal-subnavigation-in-bootstrap-3/225086
を、彼らは右上のトグルオプションを使用しているし、我々はそれをクリックしたときそれは縦リストのアイテムを表示しますが、私はそれを1つの横リストにしたいと思います。私のデザインは、スクリーンショットは
必要があります。
最後に、私は、意匠部を完成することができました。コードに続いて、私の作品：
<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);
}
私は1pxの
から.5pxする20ピクセルとの国境から0PXする余裕ボトムを変更しました