每个下拉菜单项中的Bootstrap3两个锚点

Question

是否有一个干净的Bootstrap3方式来渲染每个菜单项中的两个链接？当用户只想添加新条目时，我需要绕过列表。

我努力没有成功。结束编写此代码以呈现图片中显示的菜单。

<li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Documents<strong class="caret"></strong></a>
    <ul class="dropdown-menu">
        {% for docType in docTypes  %}
            <li>
                <a style="z-index: 10; padding-right: 0;"  href="{{ path('document_new', {'docType': docType.className }) }}">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                </a>
                <a style="padding-left: 10px; margin-left: 35px; margin-top: -26px;" class="" href="{{ path('document', {'docType': docType.className }) }}">{{ docType.name }}
                </a>
            </li>
        {% endfor %}
    </ul>
</li>

如果不是负边距，则每个项目都有两行。

修改

如果我删除每个<a>内的<li>中的样式属性，会发生什么？    我想知道是否有一种bootstrap3方法可以将两个动作放在同一行，即图标document_new和文档名称文本document。

Answer 1

删除内联样式。

.my-dropdown .dropdown-menu li a {display:inline-block;}
.my-dropdown .dropdown-menu li a:first-child:not(:last-child){padding-right:5px;}
.my-dropdown .dropdown-menu li a:last-child:not(:first-child) {padding-left:5px;}

DEMO：http://jsbin.com/masiq/1/edit

复制/粘贴你的最后（最佳）方法。

.dropdown .dropdown-menu li {
    position:relative;
}
.dropdown .dropdown-menu li a:first-child:not(:last-child){
    position:absolute;
    top:0;
    left:0;
    padding-right:5px;
}
.dropdown .dropdown-menu li a:last-child:not(:first-child) {
    padding-left:0px;
    padding-left:40px;
}