Question

我在一个合理的按钮组中有一组按钮。

当我调整页面大小时，我会得到类似的结果：

如果不让按钮文字缩小，我该怎么办？也许停止页面在某个限制下调整大小，或者让按钮变为垂直。（默认引导行为的行为相同）

<div class="btn-group btn-group-justified" role="group">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">
      Group A
    </button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">
      Group B
    </button>
  </div>
  ....

A running example on plnkr

Answer 1

在移动分辨率上按下按钮

@media(max-width: 480px){
  .btn-group {
    display: block !important;
    width: auto !important;
  }
}

Answer 2

使用vw（视口宽度）大小单位在<button>内设置字体大小。只需在style.css文件中包含此自定义css：

.btn-group > button {
    font-size: 1.5vw;
}

为您的信息1vw =视口宽度的1％。详细了解here
希望这能回答你的问题。

/* Styles go here */

.btn-group > button {
    font-size: 1.5vw;
}

<!DOCTYPE html>
<html>
<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container" style="margin-top:20px">
    <div class="btn-group btn-group-justified" role="group">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">
          Group A
        </button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">
          Group B
        </button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">
          Group C
        </button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">
          Group D
        </button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">
          Group E
        </button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">
          Group F
        </button>
      </div>
    </div>
  </div>
</body>
</html>

引导按钮组文本缩小页面调整大小

2 个答案: