在 Bootstrap 中垂直对齐左右元素答案

【问题标题】：Vertically align left and right elements in Bootstrap在 Bootstrap 中垂直对齐左右元素
【发布时间】：2017-03-19 19:47:14
【问题描述】：

我用的是 Bootstrap 3.3.7 不知道怎么显示：

标题元素h1 对齐到page-header 的左侧
button 元素对齐到 page-header 的右侧
两个元素在同一基线上

当前代码粘贴在下面，工作示例位于JSFiddle。我的问题类似于this question，但建议的解决方案对我不起作用。

<body>
<div class="container">
  <div class="row">
    <div class="col-sm-12"> 
      <div class="page-header">
        <div class="pull-left">
          <h1>Hello World <small>Home Page</small></h1>
        </div>
        <div class="pull-right">
          <button class="btn btn-primary">Submit</button>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
</body>

【问题讨论】：

问题是h1 有margin-top 但按钮没有。添加相同的边距..

标签： html css twitter-bootstrap

【解决方案1】：

从标题元素中删除上边距：

.page-header h1 {
    margin-top: 0;
}

【讨论】：

【解决方案2】：

您的问题在于 CSS，而不是标记

您提供的小提琴按预期工作，元素似乎无法正确对齐的原因是因为 bootstrap 在 h1 元素上设置了默认边距，而 buttons 没有这样做。

解决这个问题的最简单方法是添加

h1 {
    margin: 0;
}

到您网站的 CSS。

对于以“引导”方式进行的类似输出，您可以查看bootstrap navbars 和branded bootstrap navbars。

【讨论】：