如何更改bootstrap dropdown-submenu图标?

时间:2014-01-12 07:13:04

标签: twitter-bootstrap

我正在使用bootstrap 2.3.2并且我从左侧站点打开子菜单,我在左侧放置了子菜单箭头图标,但我不知道如何将右箭头图标更改为左侧。 / p>

更新

这是包含子项的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>

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

2 个答案:

答案 0 :(得分:4)

就是这样:

.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: " ";
}

答案 1 :(得分:3)

你需要查看名为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:before

的CSS中