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链接为一个工作的例子。