自舉字形圖標-定位問題

Question

我正在嘗試將Bootstrap 3中的glyphicon的位置從用戶名下方移動到其旁邊，但是我無法移動它。 這是HTML代碼：

<div class="well sidebarbox">

<div class="avatar large pull-left">
    <a href="<?php echo $this->baseUrl()?>/<?php echo $this->GetCurrentUserData('name')?>">
        <img src="<?php echo $this->GetStorageUrl('avatar') . $this->GetCurrentUserData('avatar')?>">
    </a>
</div>

<strong><?php echo $this->GetCurrentUserData('screen_name')?></strong>
<?php $current_user_meta = Zend_Registry::get('current_user_meta');?>
<?php if (isset($current_user_meta['badges'])):?>
    <div class="network-badges horizontal">
        <?php echo $this->partial('/partial/badges.phtml', array('badges' => $current_user_meta['badges']));?>
    </div>
    <?php endif;?>

<div class="clearfix"></div>

<hr />

<ul class="nav nav-pills nav-stacked">
    <li>
        <a href="<?php echo $this->baseUrl()?>/editprofile/edit"><?php echo $this->translate('Edit Profile');?></a>
    </li>
    <li>
        <a href="<?php echo $this->baseUrl()?>/search/posts"><?php echo $this->translate('All Posts');?></a>
    </li>       
</ul>

</div>

這是我的CSS代碼：

.network-badges.vertical{
padding-left: 1px;
}

.network-badges.horizontal{
white-space: nowrap;
}

.network-badges.vertical{
max-width: 64px;
}

.network-badges .network-badge{
margin: 3px 3px 0 3px;
cursor: pointer;
}

當前，輸出是這樣的：

Richard Evans
[glyphicon]

我希望它成為

Richard Evans [glyphicon]

任何意見，將不勝感激。

謝謝

Answer 1

假設您在這里正在做什么有點困難，我看不到您使用的是哪個版本的引導程序。

該文檔在這里http://getbootstrap.com/components/

通常，如果您想使用字形，請執行以下操作

<span class="glyphicon glyphicon-star"></span> Username

我發現字形和文本之間的間隔對於保持

對於超鏈接，它可能看起來像這樣

<a href"...">Username <span class="glyphicon glyphicon-star"></span></a>

真的就是這么簡單。

我能給您的最好建議是，在引入動態文本jsFiddle之前，最好先用HTML制作UI，這是一個練習的好地方。

Answer 2

bootstrap.css中的glyphicon類保留默認位置，因為所有'glyphicon-*'類都有一個psedo類，該類將圖標放在組件之前。
例如：

.glyphicon-asterisk:before {
  content: "\2a";
}
.glyphicon-plus:before {
  content: "\2b";
}
.glyphicon-euro:before {
  content: "\20ac";
}

等等。

如果您確實想在右側放置圖標，則必須“覆蓋”類，清理before偽並為after創建一個新的偽類，如下所示：

.glyphicon-asterisk:before {
    content: "";
}

.glyphicon-asterisk:after {
    content: "\2a";
}

Answer 3

將用戶名放在div中，然后將所有div浮動到左側。