響應式Twitter Bootstrap導航欄的可摺疊部分之外的內容

我試圖找到一種方法來在響應式bootstrap導航欄的簡明視圖中獲得一些簡單的文本內容，但目前爲止沒有任何效果。我想要的只是一些簡單的[用戶名] [註銷]在導航欄的右上角，當屏幕太小或窗口被調整大小，不趕上其他鏈接被製成一個列表可以通過按鈕訪問。我希望登錄信息保持在該按鈕的右側，並且在全視圖中對齊到右側（頁面鏈接左對齊）。響應式Twitter Bootstrap導航欄的可摺疊部分之外的內容

身體：

<body> 
    <div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="~/Home/Index">Index</a> 
      @Html.Partial("_TopMenuPartial") 
      @Html.Partial("_LoginPartial") 
     </div> 
    </div> 
    </div> 
... 
</body>

_TopMenuPartial：

<div class="row"> 
    <div class="nav-collapse"> 
    <ul class="nav"> 
     <li class="divider-vertical"></li> 
     <li class="active"><a href="~/Home/Index">Home</a></li> 
     <li class="divider-vertical"></li> 
     <li class="active"><a href="#">Link 2</a></li> 
     <li class="divider-vertical"></li> 
     <li class="active"><a href="#">Link 3</a></li> 
     <li class="divider-vertical"></li> 
     <li class="active"><a href="#">Link 4</a></li> 
    </ul> 
    </div> 
</div>

_LoginPartial：

@if (Request.IsAuthenticated) 
{ 
    @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" }) 
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) { 
    @Html.AntiForgeryToken() 
     <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a> 
    } 
} 
else 
{ 
    @Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" }) 
    @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" }) 
}

感謝提前任何幫助。我很努力地處理這一切。

來源

2012-10-16 user1659469

您需要在之前放置文本和註銷按鈕可摺疊菜單。如果您將它放在菜單後面，摺疊後它將在新行中。

<html> <head> <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <p class="navbar-text pull-right"> Arnold Daniels </p> <a class="brand" href="#">Test</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </div> </div> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap-collapse.js"></script> </body> </html>

來源

2012-10-16 12:21:59

謝謝！這對我來說非常合適。不知何故，在代碼左邊對齊之前，將某些東西對齊到右邊，這不太合理，但這是爲您設置的格式。 – user1659469

響應式Twitter Bootstrap導航欄的可摺疊部分之外的內容

回答

相關問題