2017-04-11 7 views
0

レイアウトフォームの右側にmenu button(横線3行)を追加して、応答しないようにします(通常の解像度で表示されます)私のPCブラウザの100%、ズームやズームのない1366 x 768)が、ブートストラップ・ユナイテッド・テーマでどうなっているのか分かりません。ブートストラップのレイアウト(テンプレート)フォームにメニューボタンを追加する方法

ご回答いただきありがとうございます。ここで

は私のHTMLページです:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - BEMF Revues</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
<body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        @Html.ActionLink("BEMF Revues", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
       </div> 
       <div id="navbarCollapse" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="dropdown active"> 


          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Revues<span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Support de demande</a></li> 
           <li><a href="#">Support de revue</a></li> 
           <li><a href="#">Tableau de suivi</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Support de contacts</a></li> 
           <li><a href="#">Ticket OTRS</a></li> 
          </ul> 
         </li> 
         <li>@Html.ActionLink("À propos", "About", "Home")</li> 
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
        </ul> 
        <form class="navbar-form navbar-left"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Rechercher"> 
          <div class="input-group-btn"> 
           <button class="btn btn-default" type="submit"> 
            <i class="glyphicon glyphicon-search"></i> 
           </button> 
          </div> 
         </div> 
        </form> 
        <ul class="nav navbar-nav navbar-right"><li><a href="#">Messages <span class="badge">0</span></a></li></ul> 
        <ul class="nav navbar-text navbar-right">Bonjour, @Environment.UserName</ul> 
       </div> 
     </div> 
    </div> 

    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - BEMF Revues</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

答えて

0

あなたはいつもハンバーガーグリフと右揃え(ナビゲーションバー右)ドロップダウン(ドロップダウン、ドロップダウン・トグル、ドロップダウン・メニュー)メニューを作成することができます(グリフィン - メニュー - ハンバーガー)

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

JS Fiddle

Reference image

関連する問題