向右浮动 bootstrap 徽章

Question

我正在尝试将 bootstrap 徽章浮动到标签的右侧。但是，我运行遇到了间距问题以及调整大小时跨度所在的元素。

当徽章出现时，我的元素大小似乎发生了足够大的变化，迫使标签在范围内移动。

  <div class="row-fluid" style="padding-top: 10px;">
    <div class="span4 text-center">
      <span class="tab">
        <a class="tab" href="javascript:void(0)" ng-click="tabSelected('one')">Stuff 1</a>
      </span>
      <span class="badge badge-success" ng-show="currentTab == 'one'">0</span>
    </div>
    <div class="span4 text-center">
      <span class="tab">
        <a class="tab" href="javascript:void(0)" ng-click="tabSelected('two')">Stuff 2</a>
      </span>
      <span class="badge badge-success" ng-show="currentTab == 'two'">0</span>
    </div>
  </div>
</div>

有没有办法将徽章放在标签的右侧，这样徽章 appears/disappears 标签就不会移动。

我正在使用 bootstrap 2.

在这里进行演示： http://plnkr.co/edit/iurlXU?p=preview

点击每个标签切换徽章。

Answer 1

发生这种情况是因为您正在使用 text-center class。 text-center class 总是根据文本的长度将文本放在 div 的中心。当您 de/activate 时，徽章的长度会发生变化，因此文本会向右或向左移动一点。如果您删除文本居中对齐，您将获得预期的结果。

如果需要将 div 的内容放置在页面的某个特定位置，您可以使用具有 <div class="row"> / 偏移量和 col-x 大小的网格样式，以便带来div 在所需位置 (1).

Check the grid style in this page

向右浮动 bootstrap 徽章

Float bootstrap badge right

css

twitter-bootstrap

twitter-bootstrap-2