Question

我将此代码用于我的标题：

<div class="accordion-class" accordion close-others="oneAtATime">
        <div accordion-group is-open="status.open">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                                 <div accordion-heading>
                                <s:text name="detalleExpediente.dlg.BloqueF1" />
                                <i class="pull-right glyphicon"
                                    ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-up': !status.open}"></i>
                                 </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
.........

我的CSS风格：

.panel-group .panel-default .panel-heading h4{ width: 100% }
.panel-heading .pull-right { padding: 8px 10px; padding: 0px 10px\0/; }
.panel-heading .pull-right.glyphicon-chevron-up,  .panel-heading .pull-right.glyphicon-chevron-down { background-position: center; background-repeat: no-repeat; }
.panel-heading .pull-right.glyphicon-chevron-up { background-image: url("../img/glyphicons-191-circle-plus.png"); }
.panel-heading .pull-right.glyphicon-chevron-down { background-image: url("../img/glyphicons-192-circle-minus.png"); }
.glyphicon-chevron-right, .glyphicon-chevron-right::before { content:"" !important; }
.glyphicon-chevron-down, .glyphicon-chevron-down::before { content:"" !important; }

我的文件夹中有这两个图像，它们的大小相同。

问题是，如果我们点击图标，它们会改变大小，但我希望它们保持相同的大小。此外，＆＃34; +＆＃34;还有一些奇怪的东西。图标。让我在gif中显示当前的效果：

如何保持这两个图标的大小和位置，以便行的宽度不会改变？

谢谢！

Answer 1

制定位置：图标的绝对值不会增加行的大小。当你点击图标时，使该图标位置：绝对也是。

要设置图标的位置，您可以使用右侧浮动，也可以使用顶部:(根据行要求）px＆amp;右:(根据行要求）px。

你也可以使用z-index。

Answer 2

我认为你这样做

.glyphicon-chevron-down, .glyphicon-chevron-down::before { content:"" !important; }

删除bootstrap所具有的字形。

然而，你没有等同于chevron-up的东西，这会在你切换时解释位置偏移。所以将其更改为

.glyphicon-chevron-down, .glyphicon-chevron-down::before { content:"\00a0" !important; }

\00a0用空格替换现有的字形而不是空字符串。

或者添加chevron-up的等效CSS规则集。

手风琴标题glyphon图标不能正常工作

2 个答案: