Невозможно расположить бутстраповских элементы по мере необходимости

Question

У меня есть вкладки и некоторые пагинацию, что я хочу выложить, как это в моем 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> 

И это результат:

Как создать опыт, который я хочу, учитывая, что строка является частью элемента вкладки?

Answer 1

CSS:

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

HTML:

<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> 

Fiddle: http://jsfiddle.net/ytyvr7c5/