Bootstrapのnavbar-navをセンター寄せにする方法
2019.05.25 2019.05.27
Bootstrapのナビゲーションバー(navbar-nav)のメニューをセンター寄せにする方法です。
イメージ図
目次
1. Bootstrap3の場合
2. Bootstrap4の場合
Bootstrap3の場合
Bootstrap3では、CSSを追加することでセンター寄せにすることができました。
CSS
@media (min-width: 768px){ .navbar-nav{ margin: 0 auto; display: table; table-layout: fixed; float:none; } }
メニューの間隔を空けたい場合、paddingで調整できます。
@media (min-width: 768px) and (max-width: 991px) { .navbar-nav li{ padding:0 1em; } } @media (min-width: 992px) and (max-width: 1199px) { .navbar-nav li{ padding:0 2em; } } @media (min-width: 1200px) { .navbar-nav li{ padding:0 3em; } }
Bootstrap4の場合
justify-content-center
Bootstrap4では、.justify-content-center
クラスでセンター寄せにすることができました。
html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbar1"> <div class="navbar-nav"> <a class="nav-item nav-link" href="#">メニュー1</a> <a class="nav-item nav-link" href="#">メニュー2</a> <a class="nav-item nav-link" href="#">メニュー3</a> <a class="nav-item nav-link" href="#">メニュー4</a> </div> </div> </nav>
メニューの間隔を空けたい場合、paddingで調整できます。
@media (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-link{ padding:0 1rem; } } @media (min-width: 992px) and (max-width: 1199px) { .navbar-nav .nav-link{ padding:0 2rem; } } @media (min-width: 1200px) { .navbar-nav .nav-link{ padding:0 3rem; } }
ml-auto mr-auto
.ml-auto
クラスと.mr-auto
クラスを設定することでもセンター寄せにできました。
html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar2" aria-controls="navbar2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar2"> <div class="navbar-nav ml-auto mr-auto"> <a class="nav-item nav-link" href="#">メニュー1</a> <a class="nav-item nav-link" href="#">メニュー2</a> <a class="nav-item nav-link" href="#">メニュー3</a> <a class="nav-item nav-link" href="#">メニュー4</a> </div> </div> </nav>