css - 向右浮动 Bootstrap 徽章

Question

我正在尝试将 Bootstrap 徽章 float 到标签的右侧。但是，我在调整大小时遇到​​了间距和跨度所包含的元素的问题。

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

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

有没有办法将徽章放在标签的右侧，这样当徽章出现/消失时标签就不会移动。

我正在使用 bootstrap 2。

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

点击每个标签切换徽章。

Answer 1

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

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

Check the grid style in this page