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>

＆＃34;你好＆＃34;正确对齐。＆＃34;联系＆＃34;正确对齐。但是，我似乎无法弄清楚如何将ul置于导航栏中心。有人可以分享他们的CSS mojo吗？

谢谢！

Answer 1

您可以使用col-和text-align执行此操作：

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

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

使用Bootstrap将导航栏内容居中

1 个答案: