Twitter bootstrap 如何更改引导下拉子菜单图标?
我使用的是bootstrap 2.3.2,我让它的子菜单从左侧站点打开,我将子菜单箭头图标放在左侧,但我不知道如何将右箭头图标更改为左箭头图标 更新 这是包含子项的Twitter bootstrap 如何更改引导下拉子菜单图标?,twitter-bootstrap,Twitter Bootstrap,我使用的是bootstrap 2.3.2,我让它的子菜单从左侧站点打开,我将子菜单箭头图标放在左侧,但我不知道如何将右箭头图标更改为左箭头图标 更新 这是包含子项的li标记: <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent1 <b class="caret"> </b></a> <
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>
-
-
我用
bootstrao.css
中的设置float:left
让孩子们从左侧站点打开,为了把箭头图标放在左侧,我做了同样的操作,现在我只需要更改图标本身。你需要查看名为下拉子菜单>a:after的类。这就是引导用来创建箭头的内容。对我来说,这似乎是一种非常可怕的方式,它使用了边界等等
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,将其反转,然后将其添加到您自己的下拉子菜单a:before
的CSS中。就是这样:
.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: " ";
}
请出示您的密码谢谢您的帮助。我是按照你的建议做的谢谢他们如何设置这些箭头确实令人困惑。我想切换它改变方向,它看起来很混乱。