小编Chr*_*ian的帖子

带箭头的Bootstrap手风琴

关于Bootstrap手风琴,我有一个简单的问题.

我创建了一个手风琴女巫可以在标题上点击以扩展.这很好但我的问题是标题中没有显示箭头.

.panel-heading [data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e072";
  /* "play" icon */
  float: right;
  color: #b0c5d8;
  font-size: 18px;
  line-height: 22px;
  /* rotate "play" icon from > (right arrow) to down arrow */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.panel-heading [data-toggle="collapse"].collapsed:after {
  /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Run Code Online (Sandbox Code Playgroud)

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Accordion START …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

Chr*_*ian

2018 06-25

7
推荐指数

1
解决办法

3万
查看次数