Bootstrap Pull-rechts Pull-Links Zentrierung auf mobilen Geräten

Question

Ich habe Probleme Fußschalter mit Pull-Links und Pull-rechts machen dann auf mobilen Geräten zentrieren. Derzeit auf dem Desktop wird es richtig angezeigt.

-Code (fiddle):

<footer > 
<div class="container"> 
    <p> 
     <div class="col-sm-4 pull-left"> 
      <strong>Powered by Google</strong>. 
     </div> 
     <div class="col-sm-4 pull-right"> 
      <a href="" title="Terms" target="_blank">Terms</a> 
      <span class="">|</span> 
      <a href="" title="Policy" target="_blank">Policy</a> 
     </div> 
    </p> 
    <BR> 
    <p> 
     <div class="col-sm-4 pull-left"> 
      Please direct all queries to admin@gmail.com 
     </div> 
     <div class="col-sm-4 pull-right"> 
      2.1 
     </div> 
    </p> 

</div> 

Wie Sie sehen können, wenn sie auf mobilen Geräten ist es wie diese angezeigt:

ich möchte es anzeigen können ähnlich zu diesem auf Mobilgerät, wo es zentriert ist:

Answer 1

1. Wickeln Sie Ihre col-*** divs in die .row Div.
2. Ich denke, dass Sie pull-left und pull-right Klassen nicht benötigen. In col-sm-push-4 Klasse rechts div bewegen auf die Seite des rechten Rand

3. Fügen Sie benutzerdefinierte CSS machen Inhalt zum Zentrum auf mobilen Geräten, wie folgt aus:

   @media (max-width: 767px) { .col-sm-4 { text-align: center; } }

Oder fügen Sie benutzerdefinierte Klasse auf diese divs, Wenn Sie nicht wollen, dass andere .col-sm-4 divs Inhalte zentriert haben.

https://jsfiddle.net/1gLmb0yy/6/

Answer 2

Sie benötigen Abfrage Medien zu verwenden, das zu tun, weil, wenn das Ergebnis nach rechts in einer kleinen Auflösung ziehen. es reagiert und geht nach unten. Sie können das F12-Entwicklertool verwenden, um das zu sehen.

<footer > 
     <div class="container"> 
       <div class="col-sm-4 row"> 
        <strong>Powered by Google</strong>. 
        Please direct all queries to admin@gmail.com 
       </div> 
       <div class="col-sm-4 row pull-right"> 
        <a href="" title="Terms" target="_blank">Terms</a> 
        <span class="">|</span> 
        <a href="" title="Policy" target="_blank">Policy</a> 
        2.1 
       <div/> 
      </div> 
      </div> 
    <footer> 

Entwickler-Tool-Ergebnis.

Beispiel Medien Abfrage

@media (max-width: 767px) { 

     .col-sm-6.row.pull-right { 
    position: relative; 
    top: -15px; 
    } 
}