Question

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

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

  <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类。文本中心类始终根据文本的长度将文本放在div的中心。当您取消/激活徽章时，长度会发生变化，因此文本会向右或向左移动一点。如果删除文本中心对齐，则会获得预期结果。

如果需要将div的内容放置在页面中的某个位置，则可以使用具有<div class="row"> / offset和col-x大小的网格样式，以便将div置于所需位置（1）。

Check the grid style in this page

浮动自举徽章右侧

1 个答案: