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