Html 响应滑块按钮

我试着把一些按钮放在滑块下面，我可以这样做，但是除了这些按钮，整个网站都是有响应的（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-->

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

}

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

任何帮助都会很好！我有一把小提琴。这是你想要的吗

我所做的更改是相对于按钮的位置，设置按钮宽度15%。。让我知道是否有效：）

以下是我修改的代码：

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

试试这个（不需要额外的css）：

海绵
数据库管理
合成技术

您是否可以添加预期结果的图像？“也许也要注意。”巴乔布森我只是想看看如何使这些按钮反应灵敏。如果它们开始变大，那么它们应该随着屏幕变小而收缩。这不是真正的风格。这非常有效，我唯一的问题是我需要让他们更高（直到我再次看了我的公司才想到这一点）那么你认为这是可能的吗？这对我来说不太合适，因为按钮一开始必须很高，虽然这确实定位了它们，但不会使它们响应迅速，并且随着屏幕变小而变小。我不明白，请看：。您的按钮在不同的屏幕上必须大小相同吗？bootply不允许您使用它，但是当它在JSFIDLE或实际的网站中时，按钮不会收缩。这也不允许我按我需要的方式放大它们。我不知道为什么引导层不起作用，请勾选此按钮上的示例，用屏幕调整大小（并对齐）（但总大小将为视口的100%）

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