Css Bootstrap 3大按钮从手机屏幕上的Jumbotron中弹出

在我的布局中，我有一个带有一个大按钮的Jumbotron作为行动号召

<a href="#" class="btn btn-lg btn-success">Let's Buy Something Fancy</a>

但是，在XS mobile视图中，按钮从Jumbotron中弹出，请参见下面的屏幕截图：

我尝试添加一行和新列，然后更改为“btn块”-当按钮停留在Jumbotron中时，文本仍会流出

---

有没有办法让手机屏幕上的按钮缩小尺寸？可能是从大到普通？

似乎是文本的长度和大小迫使按钮出血。

---

一种解决方案是在引导的同一断点处使用媒体查询更改字体大小。

您可以使用媒体查询在较小的设备上缩小按钮的比例

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:11px;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:12px;
    line-height: 1.2;
  }
}

演示：