改变引导手风琴面板的宽度(折叠元素)

change width of bootstrap accordion panel (collapsed element)

本文关键字：折叠 元素 手风琴 改变      更新时间：2023-09-26

在我的代码我有经典的引导手风琴手风琴，我想改变扩展的ul/li的宽度时点击(减少宽度)，现在有h5的全宽度，有人可以帮助吗?

<div class="panel-group" id="accordion">
                <div class="panel" >
                    <a data-toggle="collapse" data-parent="#accordion" href="#divListCiagniki">
                        <h5>ciągniki</h5>
                    </a>
                    <div id="divListCiagniki" class="panel-collapse collapse" style="width:50%">
                            <ul class="panel-body" >
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                            </ul>
                    </div>
                </div>
                <div class="panel">
                    <a data-toggle="collapse" data-parent="#accordion" href="#divListMaszynyRolnicze">
                        <h5>maszyny rolnicze</h5>
                    </a>
                    <div id="divListMaszynyRolnicze" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                            </ul>
                        </div>
                    </div>
                </div>

我建议这样使用:

li:active { 
    width: 80% !imporant;
}

记得用!important覆盖引导样式

如果你需要减小ul/li标签的宽度，使用

<div id="divListCiagniki" class="panel-collapse collapse"  style="width:<Required width>; overflow:hidden;">

//overflow: hidden隐藏超过宽度的文本

我的意思是改变div id:divListCiagniki或divListMaszynyRolnicze的宽度，但不高兴以上两种技巧都不起作用

相关文章：