BootStrap固定標題與切換按鈕

自從昨天以來，我試圖設計一個特定的固定標題在我的網站的頂部位置。BootStrap固定標題與切換按鈕

我是bootstrap的初學者，但我知道如何使用bootstrap在屏幕頂部設計固定標題。但我想用切換選項應該是simlar以下網站標題就知道設計標題：

https://www.sitepoint.com/community/t/horizontal-subnavigation-in-bootstrap-3/225086

在上面提到的網站，他們已經使用在右上角的切換選項，當我們點擊它然後它會顯示垂直列表中的項目，但是我希望它在一個水平列表中。我的設計應該

截圖：

enter image description here

來源

2017-08-26 Shalabh Saxena

最後，我才得以完成設計部分。下面的代碼工作對我來說：

<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>&copy; @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

來源

2017-08-26 23:48:29

BootStrap固定標題與切換按鈕

回答

相關問題