css - 如何使右拉正确显示？

Question

这是我当前的代码

 .tag-container.bottom-border.col-middle
    h1.text-center {{ tag.name }}
    button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow

我想把tag.name放在中间，按钮放在右边，但是显示不正确。我应该如何构建这两部分？我应该使用什么 CSS？

谢谢。

更新

这是关于基本html的简化代码

<row>
  <div>
    <h1> Tag name</h1>
  </div>

  <div class="pull-right">
    <button>Follow</button>
  </div>
 </row>

请随意处理它。谢谢

Answer 1

如果你想坚持纯 Bootstrap 风格，像这样的东西会起作用:

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <h1 class="text-center">Tag name</h1>
  </div>

  <div class="col-md-1 text-center">
    <button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
  </div>
</div>

您需要一些额外的样式来使按钮垂直居中(以替换在顶部添加 1.5em 边距的内联样式)。

此外，该样式将移动断点中 h1 下方的按钮居中......这可能是也可能不是您所追求的。