使用 bootstrap 将按钮固定在 panel-title 的右上角

Question

我使用 bootstrap 来显示一些面板。在这些面板的标题栏中，我显示了一个用于关闭面板的按钮。它看起来不错，直到标题栏中的文本太长并且按钮向下放置一行。

做了一个fiddle来说明

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

Working Fiddle

Answer 3

working try this code

将 span 标记放在 class 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>

使用 bootstrap 将按钮固定在 panel-title 的右上角

Make buttons fixed to top right of panel-title with bootstrap

html

css

css-float

twitter-bootstrap