我正在使用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> Child1</a></li>
<li><a href="~/User"><i class="fa fa-list"></i> Chiled2</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-plus"></i> Child3</a></li>
<li><a href="~/User"><i class="fa fa-list"></i> 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> Child1</a></li>
<li><a href="~/User"><i class="fa fa-list"></i> Child2</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-plus"></i> Child3</a></li>
<li><a href="~/User"><i class="fa fa-list"></i> Child4</a></li>
</ul>
</li>
</ul>
</li>
我让孩子在左侧网站打开并在float:left
中设置bootstrao.css
,并且在左侧放置箭头图标我做了同样的事情,现在我只需要更改图标本身。
答案 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