我正在尝试使导航栏向右浮动，并在导航栏中分隔列表。经过几次尝试，我发现很难。附件是我一直在努力的示例代码。i want to create something like this
$def with (page)
$var css: static/css/bootstrap.min.css static/css/bootstrap-material-design.scss
$var js: static/js/bootstrap.min.js static/js/bootstrapMaterialDesign.js static/js/jquery-3.4.1.min.js static/js/ripples.js static/js/scripty.js
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEARENA</title>
$if self.css:
$for style in self.css.split():
<link rel="stylesheet" href="$style" />
</head>
<body>
<div id="app">
<div class="navbar navbar-info navbar-fixed-top bg-light">
<div class="nav navbar-header ">
<a class="navbar-brand">DeArena</a>
</div>
<ul class="nav navbar-nav" >
<li><a class="waves-effect" href="/"> Home Feed<div class="ripples-container"></div></a></li>
<li><a href="/trending">Trending<div class="ripples-container"></div></a></li>
<li><a href="/profile">Profile<div class="ripples-container"></div></a></li>
<li><a href="/settings">Settings<div class="ripples-container"></div></a></li>
</ul>
<div class="pull-right">
<a href="/register"class="container btn btn-raised btn-default waves-effect">Register</a>
</div>
</div>
<br /><br /><br />
$:page
</div>
$if self.js:
$for script in self.js.split():
<script scr="$script"></script>
</body>
</html>
尝试使用此代码引导4版本4.4.1，并根据需要更改文本。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
<a class="navbar-brand" href="">Logo</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-success my-2 my-sm-0" type="button">Search</button>
</form>
</div>
</nav>