부트 스트랩 탐색 표시 줄에 대한 계정 정보

Question

저는 지금까지 광범위하게 검색해 왔으며 저의 인생에서 대답을 찾을 수 없습니다.

부트 스트랩 navbar에 PHP 로그인 정보 (사용자/내 계정/로그 아웃)를 넣으려고합니다.하지만 내가하는 일과 상관없이, 왼쪽에 다음과 같이 정렬 할 수 없습니다. 위의 대신 navitems! 항목 1

이의

위치는 내가 지금 가지고있는 코드 :

<header id="mainHeader" class="navbar-fixed-top" role="banner"> 
<div class="container"> 
    <nav class="navbar navbar-inverse scrollMenu" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>       <a class="brand"> 
    <div class="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget"> 
    <div> 
     <p class="brand"><div class="welcome">Welcome, <?php echo $_SESSION['user']['username']; ?><br/><a href="?action=account">My Account</a> | <a href="?logout">Logout</a></div></p></div> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="?action=projects"><i class="icon-briefcase"></i>Projects</a></li> 
     <li><a href="?action=clients"><i class="icon-users"></i>Clients</a></li> 
     <li><a href="?action=admins"><i class="icon-user"></i>Admin</a></li> 
     <li><a href="?action=settings"><i class="icon-wrench"></i>Settings</a></li> 
    </ul> 
    </div> 
     </nav> 
</div> 
</header> 

사람이 어디에 코드를 이동하는 방법, 또는 어떤이 줄을 얻기 위해 수정 말해 줄 수?

Answer 1

기본적으로 블록 레이아웃이있는 브랜드 내 div를 사용하고 있습니다. 그들은 주변 콘텐츠를 다음 줄로 밀어 넣을 것입니다. 아마도 기본적으로 인라인 레이아웃이있는 범위 나 앵커를 사용해야합니다.

여기

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <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> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <p class="navbar-text"><span class="welcome">Welcome, username</span> <br><a href="#" class="navbar-link">My Account</a> | <a href="#" class="navbar-link">Logout</a> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Clients</a></li> 
      <li><a href="#">Admin</a></li> 
      <li><a href="#">Settings</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

는 부트 스트랩 예는 매우 도움이됩니다 ... 일부 작업 코드 (fiddle)입니다. http://getbootstrap.com/components/#navbar-text

Answer 2

트릭을 수행 한 col-sm-6으로 자신의 div에있는 환영 사용자 텍스트를 감쌌다. 물론 모바일 메뉴에서이 기능을 사용하여 위치를 조정할 수 있습니다.

<header id="mainHeader" class="navbar-fixed-top" role="banner"> 
    <div class="container"> 
     <nav class="navbar navbar-inverse scrollMenu" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget"> 
       <div> 
        <div class="brand col-sm-6"> 
         <div class="welcome">Welcome,user<br/> 
          <a href="?action=account">My Account</a> | 
          <a href="?logout">Logout</a></div></p> 
         </div> 
        </div> 
        <ul class="nav navbar-nav pull-right "> 
         <li><a href="?action=projects"><i class="icon-briefcase"></i>Projects</a></li> 
         <li><a href="?action=clients"><i class="icon-users"></i>Clients</a></li> 
         <li><a href="?action=admins"><i class="icon-user"></i>Admin</a></li> 
         <li><a href="?action=settings"><i class="icon-wrench"></i>Settings</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</header> 

Answer 3

http://getbootstrap.com/components/#navbar

좀 더 연구 한 후, 위의 답변을 언급 한 것보다 더 쉽게 밝혀졌다. (비록 그 일이 너무!)

<div><p class="navbar-text">Login info/text here</p></div 

그것이 전부했다. navbar-brand는 내가 잘못하고 있었던 이미지 용입니다.