颠倒的插入符号

6 回答

• 68

  有一个内置的引导类，您可以将其附加到插入符类的父元素

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

  它适用于bootstrap 2和3

  回复于 2024-04-30T08:05:10+08:00
• 3

  假设您要使用类 caret-reversed 反转插入符，以便保留 caret 类的现有实现 .

  CSS将如下 .

  <span class="caret caret-reversed"></span> 
  
  .caret.caret-reversed {
      border-top-width: 0;
      border-bottom: 4px solid #000000;
  }
  

  它适用于bootstrap 2和3 .

  Update ：自Bootstrap 3.3.2起， .glyphicon-triangle-top 和 .glyphicon-triangle-bottom 字形可用作 .caret 及其反转版本的替代品 .

  Normal

  <span class="glyphicon glyphicon-triangle-bottom"></span>
  

  Reversed

  <span class="glyphicon glyphicon-triangle-top"></span>
  

  回复于 2024-04-30T08:05:10+08:00
• 13

  这对我有用：

  transform: rotate(180deg);
  

  回复于 2024-04-30T08:05:10+08:00
• 84

  您可以为向上箭头添加新的css类

  <style>
   .caret-up{
      border-bottom: 10px solid #000000;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: top;
      width: 0;
    }
  

  <span class="caret-up"></span>
  

  演示http://jsfiddle.net/tbgXj/3/

  回复于 2024-04-30T08:05:10+08:00
• 0

  你可以这样做：

  在HTML中：

  <span class="caret caret-reversed"></span>
  

  在CSS中：

  .caret-reversed{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  

  回复于 2024-04-30T08:05:10+08:00
• 8

  刚出现这个问题，对我来说最好的解决方案是编辑bootstrap原创的样式，这样我得到了我需要的那个 .

  所以对于每个使用bootstrap的人来说，这是相反的：

  .caret-up {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-bottom: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  }
  

  回复于 2024-04-30T08:05:10+08:00