使用引导程序将按钮固定在面板标题的右上角

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:absolute，在父级上使用position:relative。

.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 ;
}

工作小提琴

Answer 3

工作试试这段代码

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