Glyphicons提升每一個

Question

我已經在我的h3標記中添加了3個glpyhs並應用了一個樣式，但是我添加的每個glyph都似乎向上移動，因此它們彼此不符合(check link for picture)

這就是我在面板中添加了字形的方法。

<div class="col-md-4 column"> 
    <div class="panel panel-default" draggable="true"> 
     <div class="panel-heading panel-backcolour"> 
      <h3 class="panel-title">Panel title<span class="glyphicon glyphicon-trash panel-icons" /><span class="glyphicon glyphicon-trash panel-icons" /> 
       <span class="glyphicon glyphicon-trash panel-icons" /></h3> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 
</div> 

這是我正在應用到面板的自定義CSS。

.panel-icons{ 
float: right; 
cursor:pointer; 

}

Answer 1

你錯過了關閉您的span標籤。

另外我應該指出，跨度不是self closing標記，因爲您已嘗試使用它。

.panel-icons { 
 
    float: right; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-4 column"> 
 
    <div class="panel panel-default" draggable="true"> 
 
    <div class="panel-heading panel-backcolour"> 
 
     <h3 class="panel-title">Panel title 
 
       <span class="glyphicon glyphicon-trash panel-icons"></span> 
 
       <span class="glyphicon glyphicon-trash panel-icons"></span> 
 
       <span class="glyphicon glyphicon-trash panel-icons"></span> 
 
      </h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

更正您的標記有span正確關閉，像這樣：

<span class="glyphicon glyphicon-trash panel-icons"></span> 
<span class="glyphicon glyphicon-trash panel-icons"></span> 
<span class="glyphicon glyphicon-trash panel-icons"></span> 

由於你的代碼是現在，它認爲每個glyphicon是前glyphicon和您在沒有正確關閉您的span標籤。

看到這個codepen鏈接爲一個工作的例子。