【Bootstrap4】네비게이션 바(navbar)의 메뉴를 전폭으로 균등 표시하는 방법
18301 단어 HTMLBootstrapnavbarbootstrap4justify
Bootstrap4에서 Navbar를 균등하게 표시하고 싶습니다!
결론부터 말하면, 네비게이션 메뉴의 요소를 둘러싸고 있는 부모 태그에,
w-100 nav-justified
라고 하는 클래스를 덧붙여 주는 것만으로 OK입니다!이번 예에서 말하면,
<a class="navbar-nav w-100 nav-justified">
라는 기재를 해 주면 오케이입니다.일반 Navbar를 작성하는 방법
우선은 통상의 Navbar의 기재 방법입니다. 이러한 Navbar를 만들 수 있습니다.
navbar_basic.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
전폭 균등 표시하는 Navbar를 작성하는 방법
방금 전도 쓴 대로,
class="navbar-nav"
의 기재가 있는 장소에, w-100 nav-justified
라고 하는 클래스를 덧붙여 줄 뿐입니다!그러면 ... 다음과 같이됩니다! !
navbar_justified.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!--↓今回書き加えたのはここだけ!↓-->
<div class="navbar-nav w-100 nav-justified">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
경우에 따라서는, 너브 바의 메뉴가 a태그가 아니고 ul,li태그인 일도 있습니다. 그럴 때도, 네비게이션 메뉴의 요소를 둘러싸고 있는 태그(이 경우 li 태그)의 부모 태그(ul 태그)에 클래스를 덧붙여 주면 OK입니다!
navbar_ul_li.html
<nav class="navbar navbar-expand-lg">
<!-- ロゴ -->
<a class="navbar-brand">hogehoge</a>
<!-- スマホ用ナブバー展開ボタン -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tampopoNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbarの要素 -->
<div class="collapse navbar-collapse" id="tampopoNavbar">
<ul class="navbar-nav nav-fill w-100 nav-justified">
<!-- ドロップダウンしないナブバーメニュー -->
<li class="nav-item"><a href="" class="nav-link ">メニュー1</a></li>
<li class="nav-item"><a href="" class="nav-link">メニュー2</a></li>
<li class="nav-item"><a href="" class="nav-link">メニュー3</a></li>
<li class="nav-item"><a href="" class="nav-link">メニュー3</a></li>
<li class="nav-item"><a href="" class="nav-link">メニュー3</a></li>
<!-- ドロップダウンする -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
그건 그렇고,
w-100
hogehoge.css
width: 100%;
와 동의어입니다. 또,
navbar-light
라고 하는 클래스는, navbar의 링크 요소를 청지로 하는 것을 막는 효과가 있습니다.현장에서는 이상입니다.
2018/05/11 추가:
위의
navbar_ul_li.html
의 navbar의 ul 요소내 클래스가 nav
라고 잘못 기술되고 있었습니다. 올바르게 navbar-nav
입니다.놉바의 링크 부분이 파랗게 되어 있어,
navbar-light
를 사용해도 색이 변하지 않기 때문에 이상하다・・・라고 생각해 조사하면(자) 이런 잘못이었던 것 같습니다. 죄송합니다.참고 사이트
이번은 여기 를 참고로 했습니다.
Reference
이 문제에 관하여(【Bootstrap4】네비게이션 바(navbar)의 메뉴를 전폭으로 균등 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/degunosasuke/items/482f883817eef7e8e7f6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)