使用bootstrap将按钮固定在面板标题的右上方

Question

我使用引导来显示一些面板。在这些面板的标题栏中，我显示一个关闭面板的按钮。它看起来很好，直到标题栏中的文本太长，并且按钮放置在一排。

制成提琴说明

https://jsfiddle.net/fiddlejan/vt7tuj8b/

正如你可以看到十字图标放在旁边的文本的第二行。我希望它保持固定在面板的右上角。

下面是HTML什么样子：

<!-- childeren --> 
<div class="panel-group"> 
    <div class="panel panel-info fadein fadeout" ng-repeat="p in panels"> 
     <div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer"> 
      <h4 class="panel-title"> 
       open/close - test test test test test test test test test test test test test test test test test test test test - {{p}} 
       <span class="glyphicon glyphicon-remove" ng-click="close(p, $event)"></span> 
      </h4> 
     </div> 

Answer 1

您可以关闭对母按钮和position:relative使用position:absolute。

.panel-title { 
    position: relative; 
    padding-right: 20px; // add padding right so text doesn't overlap on button 
} 

.panel-title > glyphicon { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Answer 2

给下面的CSS会为你工作。

.glyphicon{ 
    position: absolute !important; 
    right: 1px; 
} 

.panel-info > .panel-heading { 
    position: relative ; 
} 

Working Fiddle

Answer 3

working try this code

把span标签先用类pull right

<h4 class="panel-title"> 
    <span class="glyphicon pull-right glyphicon-remove topright" ng-click="close(p, $event)"></span> 
    open/close - test test test test test test test test test test test test test test test test test test test test - {{p}} 

       </h4>