Question

我使用Bootstrap 3.3.7，我想知道如何显示：

标题元素h1与page-header
button元素与page-header
两个元素位于同一基线

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

<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>

Answer 1

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

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

Answer 2

你的问题是CSS，而不是标记

您提供的小提琴按预期工作，这些元素似乎没有正确对齐的原因是因为bootstrap在h1元素上设置了默认边距，而它没有{ {1}}秒。

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

button

到您网站的CSS。

另外，对于＆＃34; bootstrappy＆＃34;中的类似输出方式，您可以查看bootstrap navbars和branded bootstrap navbars。

在Bootstrap中垂直对齐左右元素

2 个答案:

你的问题是CSS，而不是标记