Question

我在尝试集中连接引导标准导航时遇到问题。

<footer id="page_footer">
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <ul id="page_footer_links" class="nav nav-pills nav-center">
                <li role="presentation"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </div>
        <div class="col-md-4">
            <p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com <a href="http://wordpress.org/" title="A Semantic Personal Publishing Platform" rel="generator" target="_blank">WordPress</a>!!!</p>
        </div>
    </div>
</div>

这里有完整的小提琴：http://jsfiddle.net/vpontin/bkpnrLo0/

我尝试过放置文本中心和中心块。没有用。即使将边距0自动或文本对齐：中心也无效。

我需要做什么？

Answer 1

.nav-pills列表项左侧有默认的浮动行为。因此，将其更改为none并使用display: inline-block将它们显示在一行中。

Updated JSfiddle

#page_footer {
  background-color: #f5f5f5;
  width: 100%;
}
#page_footer .container {
  padding: 20px;
}
#page_footer_links {
  margin: 0 auto;
  text-align: center;
}
#page_footer_wordpress {
  margin: 0px;
  height: 40px;
  line-height: 40px;
}
.nav-pills > li {
  float: none !important;
  display: inline-block !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<footer id="page_footer">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ul id="page_footer_links" class="nav nav-pills nav-center">
          <li role="presentation"><a href="#">Home</a>
          </li>
          <li role="presentation"><a href="#">Profile</a>
          </li>
          <li role="presentation"><a href="#">Messages</a>
          </li>
        </ul>
      </div>
      <div class="col-md-4">
        <p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com <a href="http://wordpress.org/" title="A Semantic Personal Publishing Platform" rel="generator" target="_blank">WordPress</a>!!!</p>
      </div>
    </div>
  </div>

如何集中左侧导航

1 个答案: