javascript - Bootstrap 按钮大小随着浏览器大小的减小而最终变为 xs

Question

我正在使用如下 Bootstrap 按钮:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<a href="/add_post/" style="text-decoration:none">
  <button type="button" class="btn btn-success btn-block">
    make post
    <span style="float:right">
      <i class="fa fa-angle-double-right"></i>
    </span>
  </button>
</a>

这在全屏模式下看起来很棒，但当我使用屏幕尺寸进行操作时，文本“make post”脱离了盒子，盒子的形状变得更粗了。我想阻止这种情况，但是如何呢？我认为 bootstrap 在涉及到移动设备时会“移动优先”，看起来还不错。但并不完美。我希望我的整个 col-sm-3 在移动时位于 Bootstrap 下拉按钮中。我该怎么做？

Answer 1

我认为你可以在按钮中尝试 css white-space 属性

<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. blah blah blah</a>

Fiddle