0
私はnavbarを作成しているように見えません。私は左上にロゴを入れたいと思っています。一度崩壊すると、ボタンは同じ行のロゴの右側に表示されます。bootstrapのロゴと異なる点のnavbar
これは私がそれを見てみたい方法です:
フルページ
を折りたたみ私はロゴの下に表示されているボタンを崩壊させ、ロゴをナビに入れたらフルスクリーンではロゴとバーが同じように表示され、上にロゴは表示されません。また、相対位置を使用してみましたが、崩壊がうまく機能しません。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<header class="masthead">
<h3 class="text-muted">Project name</h3>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
</header>
で
<a class="navbar-brand">Brand</a>
をデフォルトのブートストラップナビゲーションバーの例を使用して置き換える、しかし、これが唯一の方法です私は、ブランドのバーを上に置くことができることを発見したフルサイズのscreems、ブランド内のブランドを入れてブランドとバーを同じ行に保持し、前に言ったように、私はロゴを一緒にではなく1行 – Davidああ、私は今理解しています。次のようなことができます:https://jsfiddle.net/9n3tbay5/6/ – Shaun