css - 使用 Bootstrap 将导航栏内容居中

Question

我正在使用 Bootstrap 开发网页。我正在尝试添加一个固定的导航栏。这个导航栏将分为三个部分。我希望左侧内容左对齐，中心内容居中对齐，右侧内容右对齐。基本上，我需要它看起来像这样:

+-----------------------+-----------------------+-----------------------+
| Hello                 |    item 1 | item 2    |               contact |
+-----------------------+-----------------------+-----------------------+

为了尝试做到这一点，我编写了以下代码:

<nav class="navbar navbar-static-top" style="background-color:#000;">
  <div class="navbar-brand pull-left">Hello</div>
  <ul style="list-inline">
    <li>item 1</li>
    <li>|</li>
    <li>item 2</li>
  </ul>
  <div class="pull-right">
    contact  
  </div>
</nav>

“你好”正确对齐。 “联系人”已正确对齐。但是，我似乎无法弄清楚如何在导航栏中将 ul 居中。有人可以分享他们的 CSS mojo 吗？

谢谢!

Answer 1

您可以像这样使用 col- 和 text-align 来做到这一点:

* {
    color: #fff;
}
.list-inline {
    display: inline-block;
}
.left-content{
    text-align: left;
}
.center-content{
    text-align: center;
    padding: 15px;
}
.right-content{
    text-align: right;
    padding: 15px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-static-top" style="background-color:#000;">
    <div class="navbar-brand left-content col-xs-2">Hello</div>
    <div class="center-content col-xs-8">
        <ul class="list-inline">
            <li>item 1</li>
            <li>|</li>
            <li>item 2</li>
        </ul>
    </div>
    <div class="right-content col-xs-2">contact</div>
</nav>

您可以根据需要更改列，查看此了解更多信息 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp