【问题标题】:Bootstrap v3 Caret Position toggleBootstrap v3 插入符号位置切换
【发布时间】: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 中做到这一点,因为像 opencollapsed 这样的类将由引导程序添加,例如.open .caret { border-bottom: 4px dashed; border-top: none; }

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

如果您正在寻找以下内容,则有一个内置的向上/向下选项:

<span class="dropup">
    <span class="caret"></span>
</span>

(或者您是否在寻找更多细节或其他内容?我不完全确定我完全理解您的问题。)

【讨论】:

猜你喜欢
  • 2015-06-13
  • 1970-01-01
  • 2010-10-06
  • 1970-01-01
  • 2022-08-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-14
相关资源
最近更新 更多