Bootstrap Glyphicons - 定位問題

我試圖將Bootstrap 3中的圖形從用戶名下移動到旁邊，但我無法讓它移動。下面是HTML代碼：Bootstrap Glyphicons - 定位問題

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

任何意見，將不勝感激。

謝謝

來源

2014-02-16 Richard Evans

可以使產生的小提琴頁？乍一看，我會說你應該把用戶名放在一個div中，並將所有div浮動到左邊。 – Snowburnt

是的，如果你看看這個，你會看到輸出：www.startrekrisa.com/Picture1.png –

哦，歡呼！我設法做到了！：D謝謝 –

-1

將用戶名放在一個div中，並將所有div浮動到左邊。

來源

2014-02-16 20:40:13 Snowburnt

感謝downvote，關心澄清？ – Snowburnt

這是一個有點很難告訴你在這裏做什麼，我不能看到你使用的是什麼版本的引導，讓我們假設3

的文檔是在這裏http://getbootstrap.com/components/

通常，如果你要使用你做這樣的事情

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

我發現，字形和文本之間的空間是很重要的，保持一個字形

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

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

這真的很簡單。

我可以給你的最好的建議是，也許在引入動態文本之前讓你的UI在HTML中，jsFiddle是一個很好的練習場所。

來源

2014-02-16 20:59:23 Peter

class默認保留，因爲所有'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"; 
}

來源

2014-09-24 11:27:29 Moesio

Bootstrap Glyphicons - 定位問題

回答

相關問題