我试图将 Bootstrap 3 中字形图标的位置从用户名下方移动到它旁边,但我无法移动它。这是 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]
如有任何建议,我们将不胜感激。
谢谢
最佳答案
很难说出你在这里做什么,我看不到你使用的是哪个版本的 Bootstrap ,我们假设 3。
文档在这里http://getbootstrap.com/components/
通常,如果你想使用字形,你会这样做
<span class="glyphicon glyphicon-star"></span> Username
我发现字形和文本之间的空间保持很重要
对于超链接,它可能看起来像这样
<a href"...">Username <span class="glyphicon glyphicon-star"></span></a>
就是这么简单。
我能给你的最好建议是在引入动态文本之前用 HTML 制作你的 UI jsFiddle 是一个练习的好地方。
关于html - Bootstrap Glyphicons - 定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21816050/