我可以在bootstrap菜单中放置两个链接

Question

我正在使用bootstrap 2.3进行菜单链接

<div class="span3">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a  href="/portal/profile">My profile</a></li>
        <li><a href="#">Edit</a></li>   
        <li><a href="#">Photos</a></li>
        <li><a href="#">Competitions</a></li>
        <li><a href="#">List of profiles</a></li>
    </ul>
</div>

是否可以通过使用像图片上显示的引导程序或任何其他方式将两个链接（我的个人资料和编辑）放在一行中。感谢。

Answer 1

使用nth-child选择器，您只需使用CSS即可实现此目的。它仍然响应。

li:nth-child(1), li:nth-child(2) {
    display:inline-block;
}

DEMO：http://jsfiddle.net/z5pXh/3/

Answer 2

将另一个ul嵌入其中并添加一点额外的css

CSS

ul.nav-edit {
    margin-bottom: 0;
}

ul.nav-edit li.active {
    display:inline-block;
    width: 88%;
}

HTML

<div class="span3">
    <ul class="nav nav-pills nav-stacked">
        <li>
            <ul class="nav nav-pills nav-edit">
                <li class="active"><a href="/portal/profile">My profile</a></li>
                <li class="pull-right"><a href="#">Edit</a></li> 
            </ul>
        </li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Competitions</a></li>
        <li><a href="#">List of profiles</a></li>
    </ul>
</div>

在http://jsfiddle.net/Y2LUZ/

查看小提琴

Answer 3

Live Demo

如果固定尺寸适合您，您可以使用：

HTML

<div class="span3">
    <ul class="nav nav-pills nav-stacked pos-rel">
        <li class="col-first active"><a  href="/portal/profile">My profile</a></li>
        <li class="col-second"><a href="#">Edit</a></li>   
        <li><a href="#">Photos</a></li>
        <li><a href="#">Competitions</a></li>
        <li><a href="#">List of profiles</a></li>
    </ul>
</div>

CSS

.pos-rel {
    position: relative;
}

.col-first {
    width: 300px;
}

.col-second {
    position: absolute;
    top: 0;
    left: 305px;
}