Nav pull-left und pull-right Elemente werden nicht zueinander ausgerichtet

Question

Ich habe dieses Problem schon vorher gesehen, kann es aber nicht auf meiner einfachen Fußzeile anwenden. Es hat eine Liste auf der linken Seite und eine andere auf der rechten Seite, aber sie wird nicht sitzen Ebene miteinander und die Liste auf der rechten Seite sitzt nicht

unter der Überschrift aufgereiht

Wie Sie die linke sehen Seite sieht gut aus, aber die rechte tut alle möglichen falschen Dinge

Hier ist der hTML

<footer class="footer"> 
    <div class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container"> 
     <p class="navbar-text pull-left"> 
     <nav> 
    <h4>Boring Links</h4> 

    <ul class="pull-left"> 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Contact", contact_path %></li> 
     <li><%= link_to "Terms", root_path %></li> 
     <li><%= link_to "Privacy Policy", root_path %></li> 
    </ul> 
    </nav> 
     </p> 

     <div class="navbar-social-accs pull-right"> 
     <nav> 
     <h4>Follow Us!</h4> 
    <ul > 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Contact", contact_path %></li> 
     <li><%= link_to "Terms", root_path %></li> 
     <li><%= link_to "Privacy Policy", root_path %></li> 
    </ul> 
    </nav> 
    </div> 
    </div> 


    </div> 
</footer> 

Wie kann ich die rechte Seite bekommen links zu sitzen Ebene mit und haben die ul sitzen unter der Überschrift Text wie die linke Seite ist?

Answer 1

CodePen

Es ist wie Sie gerade wurden Umwickeln eines <p class="navbar-text pull-left"> Element um die erste nav aber nicht die zweite aussieht. Also habe ich das einfach entfernt und die Abstände behoben. Für Bootstrap-Fußzeilen fühle ich mich wie die meiste Zeit ist es einfacher, Standard col 's nur für zukünftige Referenz zu verwenden.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<footer class="footer"> 
 
    <div class="navbar navbar-default navbar-fixed-bottom"> 
 
    <div class="container"> 
 
     <div class="navbar-social-accs pull-left"> 
 
     <nav> 
 
      <h4>Boring Links</h4> 
 

 
      <ul class="pull-left"> 
 
      <li> 
 
       <%= link_to "About", about_path %> 
 
      </li> 
 
      <li> 
 
       <%= link_to "Contact", contact_path %> 
 
      </li> 
 
      <li> 
 
       <%= link_to "Terms", root_path %> 
 
      </li> 
 
      <li> 
 
       <%= link_to "Privacy Policy", root_path %> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 

 
     <div class="navbar-social-accs pull-right"> 
 
     <nav> 
 
      <h4>Follow Us!</h4> 
 
      <ul> 
 
      <li> 
 
       <%= link_to "About", about_path %> 
 
      </li> 
 
      <li> 
 
       <%= link_to "Contact", contact_path %> 
 
      </li> 
 
      <li> 
 
       <%= link_to "Terms", root_path %> 
 
      </li> 
 
      <li> 
 
       <%= link_to "Privacy Policy", root_path %> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</footer>