ボタンとページネーションのブートストラップアライメント

Question

私は新しいウェブサイトを構築するためにTwitter Bootstrap 3を使用しています。私は、左側にボタンと右側にページネーションを配置したい。

<button type="button" class="btn btn-default pull-left">Default</button> 

<ul class="pagination pull-right"> 
    <li><a href="#">&laquo;</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="#">&raquo;</a></li> 
</ul> 

私の問題は、私はきちんと両方の要素を揃えることができませんということです。

http://bootply.com/91723

改ページは小さなオフセットを持っています。

オフセットを削除するにはどうすればよいですか？

Answer 1

試してください： -

.pagination { 
margin: 0px !important; 
} 

Answer 2

UL要素に以下のスタイリングを入れて：THSを追加

<ul style="margin-top:0;" class="pagination pull-right"> 

Answer 3

をごULにして、あなたのCSSでこのクラスを追加します。

.no-top-margin { 
    margin-top: 0; 
} 

またはこれをボタンとCSSに入力してください：

.add-top-margin { 
    margin-top: 20px; 
} 

また、Chrome開発ツールやFirebugをfirefoxで使用するための初心者向けのチュートリアルを読んでください。特に将来的にもっとhtml/webを開発する予定がある場合は:-)。

Answer 4

&テーブルに入力して、余白の上端を適用できます。

<table> 
<tr> 
    <td> 
     <button type="button" class="btn btn-default pull-left"> 
      Default</button> 
    </td> 
    <td> 
     <ul class="pagination pull-right"> 
      <li><a href="#">&laquo;</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="#">&raquo;</a></li> 
     </ul> 
    </td> 
</tr> 

Answer 5

あなたは幅を設定し、ページ上でそれを中心に余白を使用することができます。また、あなたはここでul

から.pull-rightを削除する必要が動作するように、このソリューションのために注意することはHTMLは次のとおりです。ここで

<button type="button" class="btn btn-default pull-left">Default</button> 

      <ul class="pagination pull-right"> 
       <li><a href="#">«</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="#">»</a></li> 
      </ul> 

はCSSです：

.pagination { 
    display: block; 
    width: 232px; 
    margin: 0 auto; 
    background: #ccc; 
} 

Answer 6

は、あなたの周りのセマンティック記述クラスをラップボタンや改ページなどの改ページを行い、.paginationのマージンをターゲットにします。

.navigation-bar .pagination { 
     margin-top: 0; 
    } 

http://bootply.com/91736

コードベース全体に適用されるため、フレームワーククラスを直接オーバーライドしないでください。別の方法としては、単に拡張することです。ページネーションクラス：

<ul class="pagination no-margin pull-right"> 

Answer 7

私はのために行くだろう： http://getbootstrap.com/components/#btn-groups-toolbar：あなたはボタンで<ul><li....を交換する場合は、あなたがここにstyle="margin: 0;

例を使用する必要はありませ

<div class="btn-toolbar" role="toolbar" style="margin: 0;"> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-default">1</button> 
     <button type="button" class="btn btn-default">2</button> 
     </div> 

     <div class="btn-group pull-right"> 
       <ul class="pagination" style="margin: 0;"> 
       <li><a href="#">«</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="#">»</a></li> 
      </ul> 
     </div> 
    </div> 

http://www.bootply.com/116457

Answer 8

`<div class="pagination justify-content-center pagination-large" id="pagination-demo">     

`

正当化 - コンテンツセンターが