부트 스트랩 글리프 아이콘 - 위치 지정 문제

Question

부트 스트랩 3에있는 글리프콘의 위치를 ​​사용자 이름 아래에서 그 옆으로 이동하려고하는데 움직일 수 없습니다. 여기 내 CSS 코드

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

그리고 :

.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; 
} 

현재 출력은 이것이다 : 여기에 HTML 코드

Richard Evans 
[glyphicon] 

그리고이 원하는

Richard Evans [glyphicon] 

조언을 주시면 감사하겠습니다.

감사합니다.

Answer 1

div에 사용자 이름을 입력하고 모든 div를 왼쪽으로 유동시킵니다.

Answer 2

이의이 문서는 경우 일반적으로 여기 http://getbootstrap.com/components/

입니다 3.

을 가정 해 봅시다, 하드 조금 당신이 여기에서 무엇을하고 있는지 말해 당신이 사용하는 부트 스트랩의 버전을 내가 볼 수 있어요 이

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

같은 것들 내가 그리와 텍스트 사이의 공간을 유지하는 것이 중요하다는 것을 발견 할 문자 모양을 사용하려면

하이퍼 링크는 다음과 같이 보일 수 있습니다.

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

정말 간단합니다.

내가 줄 수있는 가장 좋은 조언은 동적 텍스트를 소개하기 전에 HTML로 UI를 만드는 것입니다. jsFiddle은 연습하기 좋은 곳입니다.

Answer 3

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"; 
}