Bootstrap - 在 Bootstrap 中对齐 A 标签和 H2答案

【问题标题】：Bootstrap - Align A tag and H2 in BootstrapBootstrap - 在 Bootstrap 中对齐 A 标签和 H2
【发布时间】：2026-01-06 12:25:06
【问题描述】：

我想使用 Bootstrap 3 垂直对齐一个 h2 标题和一个 href 样式按钮 - 我已经尝试了一个小时。我该如何正确地做到这一点？这将保持响应...

heading 必须左对齐，href 右对齐（这就是我使用 pull-right 类的原因），但两者的文本应在同一水平线上。

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-6">
    <h2><b>Clubnews</b></h2>
  </div>
  <div class="col-md-6">
    <a class="btn btn-sm btn-default pull-right" href="#">
      <i class="fa fa-plus-square"></i> neuer Beitrag
    </a>
  </div>
</div>

【问题讨论】：

如果您希望我们更快地帮助您，请向我们提供包含您的代码的 jsFiddle 链接。
使用class="pull-left" 到h2。
在 CSS 的帮助下：jsfiddle.net/Lq6u5401
@juno_okyo，当您使用像 Bootstrap 这样的 CSS 框架时，这不是一个好习惯。
@FrayneKonok 我知道它会覆盖默认的 CSS（Bootstrap），所以我们可以创建一个新的类名或使用样式属性，就像你的答案 xD。

标签： html twitter-bootstrap

【解决方案1】：

完整解决方案：

默认情况下，H2 有一些填充，所以为了匹配相等，我在第二个 div 中添加了一个样式。

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-6">
    <h2 class="pull-left"><b>Clubnews</b></h2>
  </div>
  <div class="col-md-6"  style="padding: 15px">
    <a class="btn btn-sm btn-default pull-right" href="#">
      <i class="fa fa-plus-square"></i> neuer Beitrag
    </a>
  </div>
</div>

【讨论】：

填充是我错过的重要内容，谢谢！