4月3日：スマイルhtml修正(navbar)、XDの続き

navbarに関して悩んだこと

navのメニュー類を右寄りに映したくてcollapeseの後にjustify-content-endを入力したが、ブラウザにアップしてみると右寄りにならず。

computedをみてみるとmargineが左右に当たっているのでmx-0を入力したが、左のmarginは無くなったが、右は無くならず。

原因は下のnavbarの　mr-autoでmarginが当たっていたのでこれを消すと右寄りになった

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

f:id:hinairo:20210403125420p:plain

toggleの色を変更

navを黒くしてるので幅を狭くした際にtoggleの色が黒になっている為、見えなくなるので色を変更。

.navbar-toggler{
border-color: #ffffff;
}
.navbar-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' 
stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' 
d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

これで枠線とtoggle自体の色を白に変更できたが、urlの意味がわからない。

f:id:hinairo:20210403122515p:plain

navbarドロップダウン機能

bootstrap公式サイトからコピぺ

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>