引導 - 中心對齊頁面頁眉與浮動按鈕

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>

預覽

這是一種方式，但很明顯，這與大小的問題。當寬度非常小時，可能會有重疊。