ブートストラップボタングループは列グリッドで水平から垂直へ

Question

私はブートストラップグリッドシステムにボタンのグループを持っています。

しかし、窓が広い場合、ボタンは次のようになります。：ウィンドウが狭い場合は、ボタンは次のようになり

がどのように私はボタンが持って作るのですか「BTN-グループ垂直」クラス、それはこのようになりますようにウィンドウが、広いです...

（注：クラスを常に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

するTryフレキシボックス：

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

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