Question

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

做一个小提琴来说明

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标记放入类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的右上角

3 个答案: