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

告诉你在这里做什么有点难以理解，我无法看到你正在使用的引导程序版本，让我们假设3。

文档在http://getbootstrap.com/components/

一般情况下，如果您想使用字形，则可以执行此类操作

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

我发现字形和文本之间的空格对于维护

非常重要

对于超链接，它可能看起来像这样

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

真的很简单。

我能给你的最好的建议是在介绍动态文本之前用HTML制作你的用户界面jsFiddle是一个很好的练习场所。

Answer 2

glyphicon中的

bootstrap.css类保留默认值，因为所有'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放到左侧。

Bootstrap Glyphicons - 定位问题

3 个答案: