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>

响应滑块按钮

2 个答案: