ナビゲーションの右側にあるメインの「Digestible」リンク以外のすべてのリンクを取得し、それらを整理するにはどうすればよいですか?
JSFiddle:https://jsfiddle.net/ut1poay3/
<div id="app">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><h4>Digestible <span class="sr-only">(current)</span></h4></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #ffcc00">Create a quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Study</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Maxwell Gover
</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>
</nav>
</div>
ありがとう!
このように:JSFiddle
<div>
「CreateQuiz」、「Study」、「Maxwell Gover」をラップするを追加して、右にフロートさせます。
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div id="app">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><h4>Digestible <span class="sr-only">(current)</span></h4></a>
</li>
<div class="right">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #ffcc00">Create a quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Study</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Maxwell Gover
</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>
</div>
</ul>
</nav>
</div>
CSS
.right {
float: right;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加