Ответственные кнопки ползунка

Question

Im пытается расположить несколько кнопок под ползунком, и я могу это сделать, но весь сайт является отзывчивым (ботстрапом), за исключением этих кнопок. Поэтому я пытаюсь их сделать.

Я пытался работать с процентами, чтобы расположить их и создать высоты и ширину жидкости, но мне не повезло. Все, что я могу сделать, это расположить их друг над другом.

Мой HTML выглядит следующим образом

<div class="col-md-12 sliderBar"> 
     <img src="assets/img/aboutPage.png" alt="" /> 
    </div><!--.col-md-12--> 
    <div class="col-md-12 sliderNav"> 
     <div class="container"> 
     <button> < </button> 
     <button>Sponges</button> 
     <button>DBM</button> 
     <button>Synthetics</button> 
     <button> > </button> 
     </div><!--.container--> 
    </div><!--.col-md-12--> 

и мой CSS выглядит следующим образом

.sliderNav{ 
    background-color: #1b1a29; 
    text-align: center; 
    position:relative; 
    padding-bottom:3%; 
    height:0; 
    overflow:hidden; 

} 

.sliderNav button{ 
    position:absolute; 
    width:20%; 
    height:100%; 
} 

Любая помощь будет здорово! У меня есть скрипка, созданная here.

Answer 1

это то, что вы хотите? fiddle

изменения я сделал это положение в относительно для кнопки, установленной ширины кнопки 15% .. дайте мне знать, если работает :)

здесь код я модифицирована:

.container button{ 
    position:relative; 
    width:15%; 
    height:100%; 
} 

Answer 2

Попробуйте это (без дополнительных css):

<div class="container"> 
<div class="col-md-12 sliderBar"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/4/41/Blank_Earth_Banner.jpg" alt="" class="img-responsive" /> 
    </div><!--.col-md-12--> 

    <div class="col-md-12">  
     <div class="btn-group btn-group-justified"> 
     <a class="btn btn-default"> &lt; </a> 
     <a class="btn btn-default">Sponges</a> 
     <a class="btn btn-default">DBM</a> 
     <a class="btn btn-default">SYNTECHICS</a> 
     <a class="btn btn-default"> &gt; </a> 
     </div> 
    </div> 
</div>