ナビゲーションバーは、それは私のMVCの部分図のブートストラップ

では正常に動作しません折りたたむ：ナビゲーションバーは、それは私のMVCの部分図のブートストラップ

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.RouteLink("მთავარი", "AdminControlUsers", null, new { @class = "navbar-brand", @style="padding-left:100px; padding-right:100px"})//this line 
      </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        @if (ViewBag.NavBarActive == "მომხმარებლები") 
        { 
         <li class="active">@Html.RouteLink("მომხმარებლები", "AdminControlUsers")</li> 
         <li>@Html.RouteLink("Stored Procedures", "ControlStoredProcedures", new { page = 1 })</li> 
         <li>@Html.RouteLink("გაშვებული Stored Procedure-ები", "Admin_User_Results_List")</li> 
        } 
        @if (ViewBag.NavBarActive == "Stored Procedures") 
        { 
         <li>@Html.RouteLink("მომხმარებლები", "AdminControlUsers")</li> 
         <li class="active">@Html.RouteLink("Stored Procedures", "ControlStoredProcedures", new { page = 1 })</li> 
         <li>@Html.RouteLink("გაშვებული Stored Procedure-ები", "Admin_User_Results_List")</li> 
        } 
        @if (ViewBag.NavBarActive == "User_Admin Results List") 
        { 
         <li>@Html.RouteLink("მომხმარებლები", "AdminControlUsers")</li> 
         <li>@Html.RouteLink("Stored Procedures", "ControlStoredProcedures", new { page = 1 })</li> 
         <li class="active">@Html.RouteLink("გაშვებული Stored Procedure-ები", "Admin_User_Results_List")</li> 
        } 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
    li><a href='@Url.Action("LogOut", "Administrator")'><span class="glyphicon glyphicon-log-out"></span> გამოსვლა @Session["Admin"].ToString()</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>

私は私のブラウザ私のナビゲーションバーのスクリーンショットのサイズを変更する場合：

1行を削除すると

@Html.RouteLink("მთავარი", "AdminControlUsers", null, new { @class = "navbar-brand", @style="padding-left:100px; padding-right:100px"})

if @ style = "padding-left：100px;パディング右：100pxには、」それは正しく動作：/

出典

2017-01-12 DVL

あなたが正確に達成したいですか？ 3番目の画像の崩壊ボタンが期待どおりに起動し、2番目のコンテンツが溢れているときに、ナビゲーションバーをコラボレーションしたくないのですか？または、オーバーフローが発生したときより早く崩壊することを望みますか？ – Syden

はい@サイデン。私は崩壊して、2番目と3番目の画像にあるようにnavbarを取得しません – DVL

コンテンツは早く崩壊buttonよりも、あなたが以前に表示するナビゲーションバーの崩壊のボタンを設定する必要がありますあふれて助けてください

あなたはCSSを経由して行うことができ、。あなたのスタイルシートにこの最後のセット（あなたの欲求にmin-widthとmax-widthを調整）：

@media (min-width: 768px) and (max-width: 991px) { 
    .navbar-collapse.collapse { 
     display: none !important; 
    } 
    .navbar-collapse.collapse.in { 
     display: block !important; 
    } 
    .navbar-header .collapse, .navbar-toggle { 
     display:block !important; 
    } 
    .navbar-header { 
     float:none; 
    } 
}

Test it on this resizable external Fiddle

ここ

出典

2017-01-12 14:17:13 Syden

@ Sydenありがとう、しかし、私は今ブラウザのサイズを変更すると、ボタンが表示されますが、他のオプションも表示されます – DVL

私は、あなたが共有したもの私は他の選択肢が多分あるかどうかわかりません。あなたが崩壊 'ボタン'の中にいたいものは、それを '

'の中に置きます。外に残っているものは何でも目に見えます。 – Syden

あなたは以下のとおりです。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <nav id="menu" class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Page 1-1</a> 
 
       </li> 
 
       <li><a href="#">Page 1-2</a> 
 
       </li> 
 
       <li><a href="#">Page 1-3</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Page 2</a> 
 
      </li> 
 
      <li><a href="#">Page 3</a> 
 
      </li> 
 
     </ul>   
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
    <p>abc</p> 
 
</body> 
 

 
</html>

出典

2017-01-13 06:28:44 ThinhLe

@ Html.RouteLink（ "მთავარი"、 "AdminControlUsers"、null、new {@class = "navbar-brand"、@ style = "パディング - 左：100px;パディング - 右：100px"} ） – DVL

これでは：@ style = "padding-left：100px; padding-right：100px" – DVL

この@styleを削除すると動作します – DVL

ナビゲーションバーは、それは私のMVCの部分図のブートストラップ

答えて

関連する問題