ブートストラップは - センターは、フローティングボタンでページヘッダを揃える

Question

見よ.page-header次の画像は、私が現在持っている：あなたが見ることができるように

が、私は中央にページヘッダを持っているしたいとボタンは左右に整列しています。

これは、両方のボタンのサイズが同じであるために機能します。私は左のボタンのサイズを増やす場合は今、何が起こるか見て：

あなたが参照してください？ヘッダーはもはや中心に位置合わせされていません、それは左のボタンで右に押されています。私の場合には望ましくないことです。ボタンのサイズに関係なく、ヘッダーを中央に揃えたいと思います。ボタンが大きすぎる場合は、ヘッダーが重なっても大丈夫です。ここで

は、コードサンプルとjsfiddleです：

<div class="container"> 

    <div class="page-header"> 
    <a class="btn btn-primary pull-left" role="button" href="#"> 
     <span class="glyphicon glyphicon-plus"></span> 
    </a> 
    <a class="btn btn-success pull-right" role="button" href="#"> 
     <span class="glyphicon glyphicon-plus"></span> 
    </a> 
    <h3 class="text-center">Header</h3> 
    </div> 

    <div class="alert alert-danger" role="alert">No results</div> 
</div> 

Answer 1

あなただけの大きさと、それらの一貫性を保つためにposition Sを使用する必要があります。

.page-header .pull-left {position: absolute; left: 15px;} 
 
.page-header .pull-right {position: absolute; right: 15px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="page-header"> 
 
    <a class="btn btn-primary pull-left" role="button" href="#"> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
    </a> 
 
    <a class="btn btn-success pull-right" role="button" href="#"> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
    </a> 
 
    <h3 class="text-center">Header</h3> 
 
    </div> 
 
    <div class="page-header"> 
 
    <a class="btn btn-primary pull-left" role="button" href="#"> 
 
     <span class="glyphicon glyphicon-plus"></span> text pushes to right 
 
    </a> 
 
    <a class="btn btn-success pull-right" role="button" href="#"> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
    </a> 
 
    <h3 class="text-center">Header</h3> 
 
    </div> 
 
    <div class="alert alert-danger" role="alert">No results</div> 
 
</div>

プレビュー

これは、1つの方法ですが、明らかに、これはサイズの問題があります。幅が非常に小さい場合、重なりがあるかもしれません。