부트 스트랩을 사용한 레이아웃 디자인

최근에 부트 스트랩 프레임 워크를 사용하여 웹 페이지를 디자인하기 시작했습니다. 웹 페이지 중 하나에서 헤더의 가장 오른쪽에 홈 및 로그 아웃 메뉴 옵션을 표시하려고했습니다. 이것은 브라우저에서 확인할 때 잘 보이지만 브라우저의 너비가 줄어들면 메뉴 (홈 및 로그 아웃)가 사라지는 것을 볼 수 있습니다.부트 스트랩을 사용한 레이아웃 디자인

몸에는 어떤 일이 일어나고 있는지 알 수 있습니다. 이것은 사용중인 코드입니다.

<head id="Head1" runat="server"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="Form1" runat="server"> 
    <div class="container-fluid"> 
     <div class="row" style="background-color: #00509F; color: #FFFFFF"> 
     <div class="col-md-10 col-xs-4"> 
      <h1>Page Title</h1> 
      <button type="button" class="navbar-toggle" 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> 
     </div>  
     <div class="col-md-2" style="text-align: right"> 
      <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right">    
       <li><a href="UserLogin.aspx" style="color: #FFFFFF">Home</a></li> 
       <li><a href="UserLogin.aspx" style="color: #FFFFFF">Logout</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-md-2" style="padding-left: 5px"> 
      <asp:Menu ID="mnuMainMenu" runat="server" cssclass="menu" > 
      <Items> 
       <asp:MenuItem Text="Menu Item1" Value="Menu Item1"  NavigateUrl="~/Page1.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item2" Value="Menu Item2" NavigateUrl="~/Page2.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item3" Value="Menu Item3" NavigateUrl="~/Page3.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item4" Value="Menu Item4" NavigateUrl="~/Page4.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item5" Value="Menu Item5" NavigateUrl="~/Page5.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item6" Value="Menu Item6" NavigateUrl="~/Page6.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item7" Value="Menu Item7" NavigateUrl="~/Page7.aspx"></asp:MenuItem> 
      </Items> 
      </asp:Menu> 
     </div> 
     <div class="clearfix visible-xs"></div> 
     <div class="col-md-10 col-xs-12 col-sm-12 " >  
      This is the place for Main content   
     </div> 
     </div> 
    </div> 
    </form>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> 
    <script src="Scripts/bootstrap.min.js" type="text/javascript"></script> 
</body> 
</html>

출처

2014-07-18 sahaneru

RTFM을 사용해주세요. 명시적인 기능입니다. http://getbootstrap.com/components/#navbar – deceze

이 들여 쓰기는 투르 드 프랑스의 단계와 같습니다. – zessx

@zessx sheesh! 너 빌어 먹을 권리가있어. D – Ranveer

@deceze는 의견 에서처럼 명시적인 기능입니다.

제거하려면 간단히 변경하십시오.

<div class="navbar-collapse collapse">

<div class="navbar">

JsFiddle에 : http://jsfiddle.net/zLDQv/

전체 효과
의 출력 창 크기를 조정하면이 코드를 눌러 실행을 붙여 전체의 출력 창 크기를 조정 그 (것)들의 효력은 사라진다

적어도이 바이올린 구성에서 작동합니다.

출처

2014-07-18 13:43:46

부트 스트랩을 사용한 레이아웃 디자인

답변

관련 문제