Question

我的页面顶部有一组4个内联按钮，位于一个超大屏幕下。

2是下拉列表，其他是常规按钮。

当我调整浏览器窗口大小时，我想让它们改为垂直堆叠，全宽。我知道添加类btn-block将使它们成为全宽，但我只希望在窗口大小小于768px时发生这种情况。

这是我目前的代码。非常感谢！

<div class="row">
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></button>
    <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            </ul>
    </li>
</div>      
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Archives <b class="caret"></b></button>
    <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            </ul>
    </li>
</div>      
<button class="btn btn-primary"><a href="#"><i class="fa fa-question-circle fa-fw"></i> Info</a>   </button>
    <button class="btn btn-primary"><a href="#"><i class="fa fa-envelope fa-fw"></i> Sign Up</a></button>
    </div>

Answer 1

您可以使用媒体查询应用768像素或更小的全宽按钮..

@media (max-width: 768px) {
    .btn,.btn-group {
        width:100%;
    }
}

演示：http://bootply.com/98570

Answer 2

我建议为这些按钮创建一个新类，而不是覆盖bootstrap。

.btn-mobile {
    width:100%;
}
@media (min-width: 768px) {
  .btn-mobile {
    width: auto;
  }
}

这些额外的样式并没有完全回答你的问题，但如果你的意图是在移动设备上使用它们，你可能会发现按钮太靠近/瘦了以供移动使用（手指比鼠标指针要胖得多）。

.btn-mobile {
    width:100%;
    margin: 8px 0;
    font-size:18px;
    line-height:1.33;
    border-radius:6px;
    padding:10px 16px;
}
@media (min-width: 768px) {
  .btn-mobile {
    width: auto;
    font-size:14px;
    line-height: 1.428571429;
    padding:6px 12px;
  }
}

如何仅在调整大小时使引导按钮全宽

2 个答案: