2014-04-21 4 views
1

저는 Laravel을 사용하여 응용 프로그램을 만들고 있고 트위터 부트 스트랩을 사용하고 싶습니다. 내가 Laravel 4.1 Boottstrap 3.1.1Twitter Bootstrap, Nav-Bar and Laravel

을 사용하고

나는 그래서이 코드

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Authentication App With Laravel 4</title> 

    {{ HTML::style('css/bootstrap.min.css') }} 
    {{ HTML::style('css/main.css')}} 
</head> 

<body> 

    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav"> 
        @if(!Auth::check()) 
         <li>{{ HTML::link('users/register', 'Register') }}</li> 
         <li>{{ HTML::link('users/login', 'Login') }}</li> 
        @else 
         <li>{{ HTML::link('users/logout', 'logout') }}</li> 
        @endif 
       </ul> 
      </div> 
     </div> 
    </div>    

    <div class="container"> 
     @if(Session::has('message')) 
      <p class="alert">{{ Session::get('message') }}</p> 
     @endif 

     {{ $content }} 
    </div> 

</body> 
</html> 

그리고 main.css가이 CSS를했던 탐색 바 갖고 싶어

body { 
padding-top: 40px; 
} 

.form-signup, .form-signin { 
width: 400px; 
margin: 0 auto; 
} 

하지만이

enter image description here

있어

nav-bar가 좋지 않아 정상적으로 보이는 nav-bar를 갖기 위해 무엇을해야할지 모르겠습니다.

CSS가 제대로 작동하지 않으며 그 이유를 모르겠습니다.

문제의 원인에 대한 단서가 있습니까?

+0

오래된 문서를 사용 귀하의 예를 들어 부트 스트랩의 버전 3 이전. 버전 "navbar-inner"클래스가 제거되었습니다. 최신 예제는 부트 스트랩 사이트의 예제를 참조하십시오. http://getbootstrap.com/getting-started/#examples –

+0

네가 맞다. 나는 옛날 문서를 보았다. 이제 제대로 작동합니다. 고마워요 @JaceRhea – Mario

답변

1

하여 UL에 메뉴 바 - 탐색의 클래스를 추가

<ul class="nav navbar-nav"> 
    @if(!Auth::check()) 
     <li>{{ HTML::link('users/register', 'Register') }}</li> 
     <li>{{ HTML::link('users/login', 'Login') }}</li> 
    @else 
     <li>{{ HTML::link('users/logout', 'logout') }}</li> 
    @endif 
</ul> 

내가 여기를 발견 http://getbootstrap.com/components/#navbar-fixed-top

어쩌면 당신이 언급하는 것 같습니다

+0

예. 문제는 이전 문서에서 물건을 보았 기 때문입니다. 내 실수. 감사합니다. . – Mario

관련 문제