html - 带有人字形图标的 Bootstrap Accordion 有一个小错误

Question

多亏了这个SO question还有这个SO question , 我已经能够用

创建一个 Bootstrap Accordion

• 每个面板的完全可点击标题
• 右侧的 V 形箭头指示面板的状态

现在，我注意到展开/折叠面板时的一个小错误:展开/折叠面板最右侧的内容在动画过程中被向左推了一点，当它打开时突然跳到正常位置完成。
我猜它有这种行为是因为 V 形图标上附有 float 。

我创建了一个 JSFiddle演示问题，这里是代码:

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
             <h4 class="panel-title">Item #1</h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">Content #1</div>
        </div>
    </div>
    ...
</div>

CSS:(我有提到我使用了纯 CSS 解决方案吗？)

.panel-heading.accordion-toggle:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    position: relative;
    bottom: 23px;
    font-size: 15pt;
    color: grey;
}
.panel-heading.accordion-toggle.collapsed:after {
    content:"\e080";
}

我确定这只是一件小事，但我似乎找不到它。

Answer 1

如何设置图标位置:absolute;和父 .parent-heading position:relative； ？这样一来，您就不会影响任何可能导致不可预测行为的元素。

.panel-heading{
    position: relative;
}

.panel-heading.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 15pt;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */

Here's the modified fiddle.