響應滑塊按鈕

我試圖在滑塊下面放置一些按鈕，我可以這樣做，但整個站點響應（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

響應滑塊按鈕

回答

相關問題