generated at
scrapboxのnav barを調べる
scrapboxのnav barを調べる

DOM
navbar.html
<nav class="navbar navbar-default"> <div class="container"> <div class="row"> <div class="col-brand dropdown global-menu-button"> <a class="navbar-brand dropdown-toggle" data-toggle="dropdown" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false"> <img class="brand-icon" src="/assets/img/logo.png"> <span class="kamon kamon-caret-down"></span> </a> <ul>...</ul> </div> <div class="col-search hidden-xs"> <div class="navbar-form"> <a class="new-button" href="/takker/new" rel="route" title="New"> <div class="horizontal-line"></div> <div class="vertical-line"></div> </a> <form class="search-form" role="search"> <div class="form-group"> <div class="dropdown"> <input type="text" class="form-control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" value=""> <ul class="dropdown-menu" role="menu" style="max-height: 11em; max-width: 100%; overflow: auto;"></ul> </div> <button tabindex="-1" type="submit" class="">...</button> </div> </form> </div> </div> <div class="col-menu"> <ul class="navbar-menu"> <li class="stream-btn hidden-xs">...</li> <li class="visible-xs"> <a class="mobile-search-toggle"> <i class="kamon kamon-search"></i> </a> </li> </ul> </div> </div> </div> </nav>
.navbar
下の要素との余白を決めている
.navbar-default
scrapboxのnav barの背景色を決めている
.navbar > .container
margin-bottomってなんだ?
.navbar .row
global menuからstreamボタンとかの部分
左右の余白をなくす
.navbar .row .col-search
.navbar .row の横幅の40%を確保している
.navbar .row .col-menu
.navbar .row の横幅の30%を確保している
#2020-11-15 17:26:41