Bootstrap Pill Inhalt nicht zentriert

Question

Etwas stimmt nicht damit, dass die Seitenleiste im Vergleich zum Pille-Inhalt nicht auf dem Boden steht. Das Ergebnis dieses Codes ist im Grunde die <aside> wird in der oberen linken Ecke neben den Pillen Tabs geschoben, während der Inhalt der Pille ist unter ihm ausgebreitet und auf der linken Seite verankert. Ich habe ein paar CSS-Tricks (Ränder, Breiten, etc.) ausprobiert, aber nichts scheint es zu zentrieren, um den Inhalt zu zentrieren (das sind Mikrostifte).

Relevante CSS:

.nav-pills > .active > a, 
.nav-pills > .active > a:hover,.nav-pills > li > a:hover { 
float:none; 
display:inline-block; 
*display:inline; 
zoom:1; 
text-decoration: none; 
font-weight: bold; 
border-radius:0px; 
border-bottom-width: 4px; 
border-bottom-style: solid; 
border-bottom-color: #000000; 
    color: #000 !important; 
    background-color: transparent !important; 
} 
.nav-pills { 
    border-radius:0px; 
    text-align: center; 
} 

Relevante ERB:

<% provide(:title, @user.name) %> 
<div class="row"> 
    <aside class="col-md-4"> 
    <section class="user_info"> 
     <h1> 
     <%= gravatar_for @user %> 
     <%= @user.name %> 
     </h1> 
     <% if @user.admin? %> 
     <span class="label label-warning">Administrator</span> 
     <% end %> 
     <br> 
     <br> 
     <br> 
     <br> 
     <div style="color:grey"> 
      <% if current_user.admin? %> 
      <%= @user.email %> 
     <% end %> 
     <br> 
     <%= @user.activated_at.strftime("Joined: %m/%d/%Y") %> 
     </div> 
    </section> 
    </aside> 

<div class="col-md-8"> 
    <ul class="nav nav-pills"> 
     <li class="active"> 
      <a data-toggle="pill" href="#microposts">Posts (<%= @user.microposts.count %>)</a> 
     </li> 
     <li> 
      <a data-toggle="pill" href="#events">Events (Insert count here)</a> 
     </li> 
    </ul> 
    </div> 
</div> 

<div class="tab-content"> 
    <div id="microposts" class="tab-pane fade in active"> 
    <% if @user.microposts.any? %> 
     <ol class="microposts"> 
     <%= render @microposts %> 
     </ol> 
     <%= will_paginate @microposts %> 
    <% else %> 
     No posts yet. Create one on the sidebar. 
    <% end %> 
    </div> 
    <div id="events" class="tab-pane fade"> 
    <p>Events brah</p> 
    </div> 
</div> 

Answer 1

Was passiert am Ende ist die <div class="tab-content"> benötigt innerhalb der row und col-md-6 Teiler Tags sein, so dass es immer noch erkannt, dass Zentrierung musste auftreten. Ansonsten sind ähnliche Fragen hier über Zentrierung Pille und Tab-Inhalt genau richtig: Twitter Bootstrap: Center Pills

Natürlich könnte ich etwas mehr CSS-Training verwenden, sorry für die Zeit, die für das Nachdenken über dieses Problem.