Klasse „Reihe“ in Bootstrap macht ziehen rechts noch mehr

Question

Angenommen, ich habe folgendes Bootstrap Paginierung Innenbehälter:

<ul class="pagination pull-right"> 
    <li> 
     <a href="#" aria-label="Previous"> 
     <span aria-hidden="true">&laquo;</span> 
     </a> 
    </li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li> 
     <a href="#" aria-label="Next"> 
     <span aria-hidden="true">&raquo;</span> 
     </a> 
    </li> 
    </ul> 

Wenn ich den obigen Code in <div class="row"> ... </div> die Paginierung zieht rechts noch mehr verursacht Fehlausrichtung mit dem Tisch wickeln das geht darüber hinaus. Warum passiert dies?

Danke.

Answer 1

Das liegt daran, .row hat einen linken und rechten Rand von -15px.

Sie sollten eine .col-xx-xx hinzufügen, die die negativen Ränder mit Padding als Kind von .row entgegenwirkt.

Beispiel:

<div class="row"> 
    <div class="col-sm-12"> 
    <ul class="pagination pagination-groups pull-right"> 
     <li> 
     <a href="#" aria-label="Previous"> 
      <span aria-hidden="true">&laquo;</span> 
     </a> 
     </li> 
     <li ng-repeat="i in range(tiGroupsData.total_pages) track by $index"><a href="#">{{$index+1}}</a></li> 
     <li> 
     <a href="#" aria-label="Next"> 
      <span aria-hidden="true">&raquo;</span> 
     </a> 
     </li> 
    </ul> 
    </div> 
</div>