Can I place two links in bootstrap menu - css

Question

I'm using bootstrap 2.3 for menu links
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li class="active">My profile</li>
<li>Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Is it possible to place two links (My profile and edit) in one line by using bootstrap like showed on picture or any other way to do it. Thanks.

Answer 1

You can achieve this with just CSS, using the nth-child selector. It is still responsive.
li:nth-child(1), li:nth-child(2) {
display:inline-block;
}
DEMO: http://jsfiddle.net/z5pXh/3/

Answer 2

nest another ul inside and a little additional 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">My profile</li>
<li class="pull-right">Edit</li>
</ul>
</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Check out the fiddle at http://jsfiddle.net/Y2LUZ/

Answer 3

Live Demo
If fixed sizes are good for you, you can use this:
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked pos-rel">
<li class="col-first active">My profile</li>
<li class="col-second">Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
CSS
.pos-rel {
position: relative;
}
.col-first {
width: 300px;
}
.col-second {
position: absolute;
top: 0;
left: 305px;
}