引导按钮在移动设备上离开页面答案

【问题标题】：Bootstrap button goes off the page on mobile引导按钮在移动设备上离开页面
【发布时间】：2016-05-04 05:51:49
【问题描述】：

在桌面上，我的按钮看起来很棒。当我转到移动版本时，按钮超出屏幕宽度，如下所示：

1) 根据我的 bootply 和下面的代码，我如何防止这种情况发生

2) 我如何也为按钮添加上边距。

这是我的靴子： http://www.bootply.com/KChuJgr967

这是我的html：

.content-section-d {
  padding: 50px 0 0 0;
}
.centered-text {
  text-align: center
}
/* Buttons */

.btn,
.btn:link,
.btn:visited {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: 15px 40px;
  background-color: #db4632;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  border-color: #db4632;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
  background-color: #db4632;
}

<div class="content-section-d">

  <div class="container">
    <div class="row centered-text">
      <div class="col-md-4 col-xs-12">
        <h3>4,000,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>1,500,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>150,000+</h3>
      </div>
    </div>
    <div class="row centered-text">
      <div class="col-md-4 col-xs-12">
        <h3>68,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>2,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>3 years</h3>
      </div>
    </div>
    <div class="col-lg-12 text-center">
      <a href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg">Register for a Free Account</a>
    </div>

  </div>
  <!-- /.container -->
</div>
<!-- /.content-section-d -->

【问题讨论】：

您是否插入了标准的<meta> 视口标签？ Here 是关于它的更多信息。
是的，我有
所以，我认为按钮width（这里是指按钮宽度内的文本）对于您的移动屏幕来说太大了。尝试对该按钮使用@media 规则，并为该按钮设置最大宽度，并将其设为display: block。类似this one
你能给我看看 bootply 吗？在这里放什么：@media(max-width:767px) { }
是的，但首先您还需要尝试一件事。您能否在您的示例中将 a 标签更改为 button 并在您的手机上检查这个标签？

标签： html css twitter-bootstrap

【解决方案1】：

所以，正如我在 cmets 中指出的，您需要使用 @media。

这里是按钮的代码，您应该将其添加到样式表中。

@media(max-width: 1200px) {
    .btn span {
        display: block;
        max-width: 200px;
        white-space: normal;
    }
}

另外，不要忘记将<span> 添加到您的按钮。现在按钮代码是：

<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>

here 是 JSFiddle 上的完整工作示例。

附：将@media 中的max-width 更改为您的属性。

【讨论】：

【解决方案2】：

您可以使用 vw 和 vh CSS 规则来根据屏幕大小更改文本的大小。在你的情况下，如果你添加这个：

  font-size:3vw;
  font-size:1.8vh;

效果很好。（使用价值来获得您所需要的）

【讨论】：