Question

我使用bootstrap 3，我发现几行css，效果很好，使得插入符号在点击时反转（倒置）。

.navbar-nav .open > a > b.caret {
  border-top: none;
  border-bottom: 4px solid;
}

供您参考，这是我的（非常标准）下拉列表：

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Some Title Text <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li>Some Submenu text</li>
      <li>Some Submenu text</li>
    </ul>
  </li>
</ul>

为什么会这样？我希望你的帮助能够深刻理解它。谢谢！

Answer 1

Bootstrap caret使用流行的技巧在CSS中绘制三角形。

你可以看到它HERE

顶部和底部箭头（三角形）的CSS代码：

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

bootstrap3 - 在navbar-nav中单击插入符号反向

1 个答案: