引导按钮组在列网格中水平到垂直

Question

我在bootstrap网格系统中有一组按钮。当窗口很窄时，按钮看起来像这样：

但是当窗口很宽时，按钮看起来像这样：

当窗口很宽时，如何使按钮具有“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

在您的HTML代码中，为按钮组添加一个ID，然后在CSS代码中，引用该ID并将显示更改为inline-grid，如下所示：

// HTML代码

   <div id="multiple-buttons" class="btn-group" role="group">
           <button id="bt1" type="button" class="btn">Button1</button>
           <button id="bt2" type="button" class="btn">Button2</button>
           <button id="bt3" type="button" class="btn">Button3</button>
     </div>

// CSS代码

#multiple-buttons{
          display: inline-grid;}

Answer 3

您可以使用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 4

尝试使用flexbox：

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

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