在 Bootstrap3 中使用按钮工具栏居中标题文本

Question

我正在使用 Bootstrap3 中的 .btn-toolbar class 在某些标题文本的两侧放置按钮。我需要标题文本居中，所以我使用 .text-center class.

文本确实相对于按钮之间的 space 居中。但我希望文本以页面本身为中心，就像下面示例中标题下方 main 部分中的文本一样。

有什么办法可以做到吗？

下面是一个示例，希望能更好地说明这一点：

h2 {
  background-color: #e3e3e3;
  text-align: center;
}

.main {
  text-align: center;
}

.btn {
  margin-right: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class='btn-toolbar pull-left'>
  <div class='btn-group'>
    <button type='button' class='btn btn-primary'>Button Text</button>
    <button type='button' class='btn btn-primary'>Button Text</button>
  </div>
</div>
<div class='btn-toolbar pull-right'>
  <div class='btn-group'>
    <button type='button' class='btn btn-primary'>Button Text</button>
  </div>
</div>
<h2>Text</h2>
<div class="main">
  This text is centered on the page.
</div>

Answer 1

您可以尝试使用 position: absolute;

而不是使用浮动来定位您的工具栏

看看下面的代码。这有帮助吗？

h2 {
  background-color: #e3e3e3;
  text-align: center;
}

.main {
  text-align: center;
}

.btn {
  margin-right: 5px;
}

/* New CSS for toolbar */

.my-toolbar{ position: relative;}
.my-toolbar .btn-toolbar{
  position: absolute;
  top: 0;
  bottom: 0;
  
}
.my-toolbar .btn-toolbar.left{
  left: 0;
}
.my-toolbar .btn-toolbar.right{
  right: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="my-toolbar">
<div class='btn-toolbar left'>
    <div class='btn-group'>
        <button type='button' class='btn btn-primary'>Button Text</button>
        <button type='button' class='btn btn-primary'>Button Text</button>
    </div>
</div>
<div class='btn-toolbar right'>
    <div class='btn-group'>
        <button type='button' class='btn btn-primary'>Button Text</button>
    </div>
</div>
<h2>Text</h2>
</div>
<div class="main">
This text is centered on the page.
</div>

在 Bootstrap3 中使用按钮工具栏居中标题文本

Centering heading text with button toolbar in Bootstrap3

html

css

twitter-bootstrap

twitter-bootstrap-3