如何更改引导下拉子菜单图标？答案

【问题标题】：How to change the bootstrap dropdown-submenu icon?如何更改引导下拉子菜单图标？
【发布时间】：2019-06-29 01:36:56
【问题描述】：

我正在使用 bootstrap 2.3.2，并使其子菜单从左侧站点打开，并将子菜单箭头图标放在左侧，但我不知道如何将右箭头图标更改为左侧。

更新

这是包含子项的li 标记：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent1 <b class="caret">
    </b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu"><a href="#" tabindex="-1">Sub-Parent1</a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="fa fa-plus"></i>&nbsp;Child1</a></li>
                <li><a href="~/User"><i class="fa fa-list"></i>&nbsp;Chiled2</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="fa fa-plus"></i>&nbsp;Child3</a></li>
                <li><a href="~/User"><i class="fa fa-list"></i>&nbsp;Child4</a></li>
            </ul>
        </li>
        <li class="dropdown-submenu"><a href="#" tabindex="-1">Sub-Parent2</a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="fa fa-plus"></i>&nbsp;Child1</a></li>
                <li><a href="~/User"><i class="fa fa-list"></i>&nbsp;Child2</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="fa fa-plus"></i>&nbsp;Child3</a></li>
                <li><a href="~/User"><i class="fa fa-list"></i>&nbsp;Child4</a></li>
            </ul>
        </li>
    </ul>
</li>

我通过在bootstrao.css 中设置float:left 让孩子从左侧站点打开，并将箭头图标放在左侧我做了同样的事情，现在我只需要更改图标本身。

【问题讨论】：

请出示您的代码

标签： twitter-bootstrap

【解决方案1】：

就是这样：

.dropdown-submenu > a:after {
  display: block;
  float: left;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-right-color: #cccccc;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  content: " ";
}

【讨论】：

【解决方案2】：

您需要查看名为dropdown-submenu>a:after 的类。这就是 bootstrap 用来创建箭头的方法。这对我来说似乎是一种非常糟糕的方式，它使用边框等。

display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
margin-right: -10px;
border-color: transparent;
border-left-color: #ccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";

您必须获取此 CSS，将其反转，然后将其添加到您自己的 dropdown-submenu>a:beforeCSS 中

【讨论】：

感谢您的帮助。我是按照你的建议做到的。;)
谢谢！他们如何设置这些箭头确实令人困惑。我想切换它改变方向，看起来很混乱。