Question

我有4个按钮，我想在网络浏览器上显示2x2，然后在移动设备和平板电脑上堆叠在彼此的顶部。我读到了关于使用btn-primary和secondary以及按钮块，但我没有运气。最容易实现这个目标的任何方向？

＆＃13;

    <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>

＆＃13;

Answer 1

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

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

＆＃13;

@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%;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用CSS @media查询重新定位移动设备上按钮的布局......

如何在移动设备上堆叠引导按钮

2 个答案: