如何在手机上堆叠启动按钮

Question

我有4个按钮，我想在网络浏览器上显示2x2，然后在移动设备以及平板电脑上彼此堆叠。我读到有关使用btn-primary和secondary以及按钮块的信息，但是我没有运气。最简单的方法有什么方向吗？

    <div class="button-group ">    
                <button class="btn btn-primary btn-primary page-scroll" href="#intro">watch video</button>
                 <button class="btn btn-primary btn-secondary">review info</button>
            </div>
            <div class="button-group ">  
                 <button class="btn btn-primary btn-primary">see sample</button>
                 <button class="btn btn-primary btn-secondary">sequence</button>
            </div>  

Answer 1

Bootstrap的.btn-group组件允许您一次使用八字水平样式或垂直样式.btn-group，但不能同时使用两者。

使用媒体查询和覆盖样式。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.btn-group {margin-bottom: 10px;}

@media only screen and (max-width: 767px) {
  .btn-group {
    display: block;
  }
  
  .btn-group .btn {
    display: block;
    float: none;
    width: 100%;
  }
}

<div class="btn-group">    
  <button class="btn btn-primary" href="#intro">watch video</button>
  <button class="btn btn-primary">review info</button>
</div>
<div class="btn-group ">  
  <button class="btn btn-primary">see sample</button>
  <button class="btn btn-primary">sequence</button>
</div>