Bootstrap - 中心对齐页面标题和浮动按钮

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>

预览

这是一种方式，但很明显，这与尺寸调整有关。当宽度非常小时，可能会有重叠。