Bootstrap의 내비게이션 바(Navbar) 안에 링크가 아닌 일반 텍스트를 배치하고 싶을 때는 .navbar-text 클래스를 사용하면 됩니다. 이 클래스는 요소에 적절한 세로 정렬과 여백을 자동으로 적용해 주기 때문에, 내비게이션 바의 다른 메뉴 항목들과 자연스럽게 어울리는 텍스트를 손쉽게 넣을 수 있습니다.
예를 들어 저작권 문구나 간단한 안내 문장처럼 클릭이 필요 없는 문자열을 Navbar에 추가할 때 유용합니다.
예제
아래 코드를 실행하면 Bootstrap Navbar에 텍스트를 설정하고 줄 바꿈되어 표시되는 모습을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">Demo</a> </div> <div> <p class = "navbar-text">Copyright © 2018</p> </div> </nav> </body> </html>
코드 설명
- <nav class="navbar navbar-default">: 기본 스타일이 적용된 내비게이션 바를 생성합니다.
- .navbar-brand: 브랜드 이름이나 로고가 들어가는 영역입니다. 위 예제에서는 'Demo'라는 텍스트가 사용되었습니다.
- .navbar-text: 일반 텍스트를 Navbar 안에 배치하는 클래스로, 메뉴 링크와 동일한 높이와 여백으로 정렬됩니다.
위 예제에서는 <p class="navbar-text"> 태그 안에 'Copyright © 2018'이라는 문구를 넣어, Navbar 우측에 저작권 표시가 자연스럽게 출력되도록 했습니다. 이처럼 .navbar-text 클래스만 추가하면 별도의 CSS 작성 없이도 텍스트가 깔끔하게 정렬되고 필요에 따라 줄 바꿈도 처리됩니다.