如何使右拉正确显示？

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 下方的按钮居中……这可能是也可能不是您所追求的。

如何使右拉正确显示？

How to make pull right display properly?

css

twitter-bootstrap

angularjs

pug