Question

<div class="btn-group btn-group-justified">
            <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="index.html">Mining Product1</a>
            </div>
            <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="index.html">Mining Product2</a>
            </div>
            <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="index.html">Mining Product3</a>
            </div>
            <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="index.html">Mining Product4</a>
            </div>
            <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="index.html">Mining Product5</a>
            </div>
</div>

我已经制作了一个使用它的按钮栏，它工作正常但是当我在手机上查看它时，所有的按钮都被挤压，文字从它们中出来。如何在屏幕尺寸较小时将按钮从一个条形图中折叠并叠放在一起？

Answer 1

向您的论坛添加课程，我已使用btn-group-sm-stacked。

<div class="btn-group btn-group-justified btn-group-sm-stacked">
    <a type="button" class="btn btn-default btn-sm" href="#">Mining Product1</a>
    <a type="button" class="btn btn-default btn-sm" href="#">Mining Product2</a>
    <a type="button" class="btn btn-default btn-sm" href="#">Mining Product3</a>
    <a type="button" class="btn btn-default btn-sm" href="#">Mining Product4</a>
    <a type="button" class="btn btn-default btn-sm" href="#">Mining Product5</a>
</div>

然后使用媒体查询来改变其在小型设备上的行为：

@media (max-width: 768px) {
  .btn-group-sm-stacked {
    display: block;
  }

  .btn-group-sm-stacked .btn {
    display: block;
    width: auto;
  }
}

在Bootply

上查看

Bootstrap 3.0 - 使链接按钮堆叠？

1 个答案: