响应式滑块按钮

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

任何帮助都会很棒！我设置了一个小提琴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>