web-dev-qa-db-ja.com

Twitter-bootstrapから.btn-groupを中央に配置する方法は？

私は Twitter-bootstrap を使用していますが、クラス.btn-group（ link ）を持つdivを中央に配置するのはかなり難しいことがわかりました。通常、私は使用します

margin: 0 auto;

または

text-align: center;

div内の要素を中央に配置しますが、内部要素にfloat: leftプロパティがあり、この場合は視覚効果に使用される場合は機能しません。

http://jsfiddle.net/EVmwe/1

htmlcsscss3twitter-bootstrap
71
evfwcqcg

編集：これはBootstrap 3.の時点で変更されています。以下のBootstrap 3の解決策を参照してください。

質問からラッピングdivを追加していますか？

この例を見てください： http://jsfiddle.net/EVmwe/4/

コードの重要な部分：

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

分割内にボタングループをラップし、divをテキストの中央揃えに設定します。インラインブロックを表示し、幅を継承するには、ボタングループも上書きする必要があります。

@Andres Ilichが言ったように、アンカー表示をinline-blockおよびfloat：noneに上書きすることもおそらく機能します。

Bootstrap 3の更新

Bootstrap 3の時点で、アラインメントクラスがあります（ documentation を参照）。これで、単にtext-center親へのクラス。そのようです：

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><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>
</div>

こちらの実際の例をご覧ください： http://jsfiddle.net/EVmwe/409/

74
mikaelb

これは私のために動作します（ブートストラップ3）：

<div class="text-center">
   <div class="btn-group">
      <a href=1 class="btn btn-small">1</a>
      <a href=1 class="btn btn-small">2</a>
      <a href=1 class="btn btn-small">3</a>
   </div>
</div>
73
Alberto Gaona

または、「ページネーション中心」を追加します、例：

<div class="btn-toolbar pagination-centered">
  <div class="btn-group">
    <a href=1 class="btn btn-small">1</a>
    <a href=1 class="btn btn-small">2</a>
    <a href=1 class="btn btn-small">3</a>
  </div>
</div>
14
Hanzaplastique

for bootstrap 4

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>
7
Vasil Valchev

Twitter Bootstrap 3なので、回避策は必要ありません。text-align: centerは親要素です。

6
Tim

ボタンリンクをinline-blockではなくfloat:leftとして宣言するだけで、text-align:center宣言は次のように機能します。

.btn-group a {
    display:inline-block;
}

デモ： http://jsfiddle.net/EVmwe/3/

6
Andres Ilich

誰かが.btn-groupの幅も変更したい場合は、widthではなくmin-widthを実行できます。これは私がしました：

HTML：

<div class="text-center">
<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
</div>
</div>

CSS：

.btn-group {min-width: 90%;}
.btn {width: 50%;}

Btn-groupの幅をtext-centerの90％に設定し、含まれる各ボタンはボタングループの50％（text-center divの45％）です。

4
Nagra
<div class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>
1
Diego

次のソリューションを使用しています。

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>
1
Rusty

Pタグでbtn-groupをスローし、p {}にtext-align：centerスタイルを使用します

    p {
    text-align: center;
    }

    <p>
    <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
    </div>
    </p>
0
Jake Wolfe

Bootstrap 3では、次の変更のように単純に構成する必要があります

    <div class="btn-toolbar">
        <div class="btn-group">
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 1                                     
            </button>           
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 2
            </button>
            <button onclick="#" class="btn btn-default btn-sm" type="button">                                               
                Click 3
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 4
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 5
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 6
            </button>
        </div>
    </div

そして、余白やテキストの中心で強制できないように、フロートを左に強制するこれだけ（ブートストラップをオーバーライドする）スタイルを修正します。

.btn-toolbar .btn-group {float:initial;}

これは私にとっては大きな変化なく機能します。

0
Osify

これはBootstrap v3.3で私のためにトリックをしました

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
0
jetpackdata.com