html - レスポンシブ スライダー ボタン

Question

いくつかのボタンをスライダーの下に配置しようとしていますが、それは可能ですが、これらのボタンを除いて、サイト全体が反応します (botstrap)。だから私はそれらをそうしようとしています。

パーセントを使用してそれらを配置し、流動的な高さと幅を作成しようとしましたが、運がありませんでした. 私ができることは、それらを互いの上に配置することだけです。

私の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%;
}

どんな助けでも素晴らしいでしょう！ここにフィドルを設定しました。