Bootstrap - Trying to centralize a Nav (not navbar)

Asked

Viewed 1,084 times

3

I’m having a big problem trying to center a Nav on a grid.

The fiddle is here, and I wanted that when the space ran out and the "cells" piled, the Nav would be centered like the wordpress paragraph.

I found no reference other than navbar (I will not use for functional reasons) and apparently focused on older versions.

Anyway, what solution could I take?

  • Yes. I’m developing the layout on top of it

1 answer

3

Answered question in the English post.

the class .nav-pills has float:left by default. Then just put to None and then show all in a row with display: inline-block.

FIDDLE UPDATED

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.