引導按鈕組在列柵格中水平到垂直

Question

我在自舉網格系統中有一組按鈕。當窗口很窄的按鈕看起來是這樣的：

但是當窗寬，按鈕看起來是這樣的：

如何使按鈕具有當窗口很寬時，類別爲「btn-group-vertical」，以便它看起來像這樣...

（注意：我不能一直將該類設置爲btn-group-vertical，否則當窗口變窄時，會將按鈕列下方的側面圖片推向另一側，因爲按鈕不會並排跨越在頂部）

目前代碼（去掉了所有PHP絨毛）：

<div class="row"> 
    <div class="col-md-2"> 
     <div class="btn-group" align="center"> 
      <button type="button" class="btn btn-default">button_has_long_name</button> 
      <button type="button" class="btn btn-default">button_short</button> 
      <button type="button" class="btn btn-default">button_another_long</button> 
      <button type="button" class="btn btn-default">button_etc</button> 
     </div> 
    </div> 

    <div class="col-md-10"> 
     <img style="width:900px" id="shown_image" src="./images/empty.jpg"> 
    </div> 

</div> 

Answer 1

您需要使用一些JS，使之成爲可能。

Fiddle

JS

var wideScreen = 640; // for example beyond 640 is considered wide 

var toggleBtnGroup = function() { 
    var windowWidth = $(window).width(); 

    if(windowWidth > wideScreen) { 
    $('#btn-group-toggle').addClass('btn-group-vertical').removeClass('btn-group'); 

    } else { 
    $('#btn-group-toggle').addClass('btn-group').removeClass('btn-group-vertical'); 
    } 
} 

toggleBtnGroup(); // trigger on load 

window.addEventListener('resize',toggleBtnGroup); // change on resize 

Answer 2

你可以使用一個CSS媒體電話。類似這樣的：

div.btn-group{ 
    //css for narrow screen 
} 

@media only screen and (min-width: 800px){ 
    div.btn-group{ 
     //css for wide screen 
    } 
} 

並且讓你的按鈕在任何地方都使用btn-group類。當屏幕的最小寬度爲800px，或者您想要設置的任何數字時，寬屏幕CSS將會生效。

Answer 3

嘗試Flexbox的：

@media(min-width: 960px){ 
.btn-group { 
    display: flex; 
    flex-direction: column; 
} 
} 

https://jsfiddle.net/hwj860o7/3/