【发布时间】:2017-12-11 11:01:35
【问题描述】:
我正在尝试找到引导程序在切换.collapse div 时切换插入符号的向上/向下显示的默认方式。
所以代码是:
<div class='row'>
<div class='col-sm-8'><h3>Select Image</h3></div>
<div class='col-sm-4 text-right'><button type='button' class='btn btn-default' data-toggle='collapse' data-target='#image-files' aria-expanded="false"><b class="caret"></b></button></div>
</div>
<div id='image-files' class='collapse'>
<div class='row'>
Content
</div>
</div>
我确定我在某处读到引导库会自动以某种方式将插入符号从下更改为上。
当然,我可以使用一行 Jquery 来完成,但我确信它已内置于引导程序中,我想知道如何使用它。
【问题讨论】:
-
我不认为使用 Bootstrap 默认存在任何解决方案,但您可以使用
button的属性通过添加这段 CSS 来实现您所寻求的 代码为:button[aria-expanded=true] .caret { border-top: 0; border-bottom: 4px solid #000; } -
我在文档中找到了以下语句:getbootstrap.com/css/#helper-classes-carets:“请注意,下拉菜单中的默认插入符号会自动反转。” - 但即使在他们的示例中,它也不会... - 但你可以在 CSS 中做到这一点,因为像
open或collapsed这样的类将由引导程序添加,例如.open .caret { border-bottom: 4px dashed; border-top: none; }
标签: javascript jquery html css twitter-bootstrap