响应滑块按钮

我试图在滑块下面放置一些按钮，我可以这样做，但整个站点响应（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。

来源

2013-09-22 zazvorniki

你能添加一个你期望的结果吗？也许可以看看http://getbootstrap.com/components/#btn-groups-jostified。 –

@BassJobsen我真的只是看着如何使这些按钮响应。如果他们开始变大，那么他们应该缩小屏幕。这不是真正的风格。 – zazvorniki

这是你想要的吗？ fiddle

我所做的更改位置相对的按钮，设置按钮宽度15％..让我知道，如果作品:)

这里是我修改了代码：

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

来源

2013-09-22 18:55:39

这很奇妙，我唯一的问题是我需要让他们更高（甚至没有想到这个，直到我再次看着我的补偿），所以你认为这是可能的？ – zazvorniki

试试这个（不需要额外的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>

来源

2013-09-22 19:08:38

这对我来说不太合适，因为按钮必须相当高才能开始使用，虽然这确实会定位它们，但它不会使它们响应并随着屏幕变小而变小。 – zazvorniki

我不明白请参阅：http://bootply.com/82473。您的按钮在不同屏幕上的尺寸是否必须相同？ –

bootply不允许你选择它，但是当它位于jsfiddle或实际网站中时，按钮不会缩小。这也不能让我按照他们需要的方式放大它们。 – zazvorniki

响应滑块按钮

回答

相关问题