Twitter bootstrap 无法根据需要定位引导元素

我有一个选项卡和一些分页，我想在JSP中这样布局：

所以我写了这个JSP：

<div class="row">
    <div class="col-sm-6">
        <ul class="nav nav-tabs" id="myTab">
            <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
            <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
        </ul>
    </div>
    <div class="col-sm-6">
        <ul id="pagination" class="pagination-sm"></ul>
    </div>
</div>

这就是结果：

考虑到line元素是tab元素的一部分，如何创建我想要的体验？

CSS:

nav {
    position: absolute;
    left: 180px;
    top: -60px;
}

HTML:

1
2
3

---

小提琴：

演奏得很好。我看到关键是使用位置：绝对。我还不得不去掉插件带来的利润，但之后一切都很顺利。谢谢

<div class="row">
    <div class="col-sm-6">
        <ul class="nav nav-tabs" id="myTab">
            <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
            <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
        </ul>
    </div>
</div>
<div class="col-sm-6">
    <nav>
      <ul class="pagination">
        <li class="active"><span>1 </span></li>
        <li class="active"><span>2 </span></li>
        <li class="active"><span>3 </span></li>
      </ul>
    </nav>
</div>