如何创建一个内嵌导航栏，其中标题位于左侧，链接位于右侧？

Question

我试图在位置上复制这个：

但是我的代码会返回一个未对齐的元素组，如下所示：

这是我的代码：

<div class="row">
    <div class="col-sm-2 col-sm-offset-2">
        <h4 style="color: white">Quietgym</h4>
    </div>
    <div class="col-sm-4 col-sm-offset-4">
        <ul class="list-inline" style="color: white">
            <li><a>Today</a></li>
            <li><a>This Week</a></li>
            <li><a>Overall</a></li>
        </ul>
    </div>
</div>

Answer 1

尝试使用navbar类

<nav class="navbar navbar-inverse">
     <div class="container">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">Quietgym</a>
         </div>
         <ul class="nav navbar-nav navbar-right">
             <li><a href="#">Today</a></li>
             <li><a href="#">This Week</a></li>
             <li><a href="#">Overall</a></li>
         </ul>
   </div>
</nav>

此代码段来自引导程序文档here。 Bootstrap附带一个预构建的css类，用于构建响应式导航栏。 您还可以使用w3schools navbar tutorial here。