如何在引导程序 3 中获得响应按钮答案

【问题标题】：How to get a responsive button in bootstrap 3如何在引导程序 3 中获得响应按钮
【发布时间】：2013-10-17 12:39:48
【问题描述】：

我正在使用 bootstrap 3，并且我有以下 html：

<div class="col-sm-2" >
    <a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>

在小屏幕上，“创建新板”文本太长，无法放在按钮上。我希望文本换行到另一行，并增加按钮的高度以适合文本。有关如何执行此操作的任何提示？

【问题讨论】：

【解决方案1】：

在 Bootstrap 中，.btn 类有一个 white-space: nowrap; 属性，这样按钮文本就不会换行。因此，在将其设置为normal 并为按钮提供width 之后，如果文本超出设置的width，则文本应换行到下一行。

#new-board-btn {
    white-space: normal;
}

【讨论】：

设置按钮的宽度会破坏响应式按钮的目的。
您不必设置宽度，bootstrap 会为您设置。我只是使用设置宽度来说明将white-space 设置为normal 将使按钮在按钮的宽度超过其最大值时换行。 white-space: normal; 完成所有工作。
我会把它变成一个类（这样你就可以在所有按钮上重复使用它）并删除宽度：.multi-line-button { white-space: normal; }
我只是使用#new-board-btn，因为这是按钮当前设置的。显然，你可以使用任何你喜欢的类。
我也很想创建一个类，但与其将其称为 .multi-line-button 不如将其称为 .text-wrap（因为已经有一个名为 .text-nowrap 的 Bootstrap 类）所以你会尽可能地保持抽象，确保它在非按钮项目上的使用是可接受的。

【解决方案2】：

我知道这已经有了一个明显的答案，但我觉得我对它有改进。

标记的答案有点误导。他为按钮设置了一个宽度，这不是必需的，并且设置的宽度不是“响应式”的。为了他的辩护，他在下面的评论中提到，宽度不是必需的，只是一个例子。

这里没有提到的一件事是，单词可能会在单词中间中断并且看起来很乱。

我的解决方案，强制在单词之间发生中断，一个不错的自动换行。

.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}

<a href="#" class="btn btn-primary btn-responsive">Click Here</a>

【讨论】：

感谢您的贡献 - 这确实是一个改进，所以我给了它一个赞成票。
使按钮垂直扩展，非常难看。
@mur7ay - 这是你的意见。在我看来，当按钮的文本没有正确换行时，它更难阅读（而且更难看）。虽然基于vw 调整大小会缩小文本并变得更好。有很多时候可以打破这个词，或者你有大多数检查（即：使用vw）但如果所有其他方法都失败了，希望它能够正确换行。
@Wade - 很好的解决方案，我更喜欢这个，它解决了原来的问题。赞成。

【解决方案3】：

对于任何可能感兴趣的人，另一种方法是使用@media 查询来缩放不同视口宽度上的按钮..

【讨论】：

【解决方案4】：

在某些情况下，使用相对字体大小单位更改字体大小非常有用。例如：

.btn {font-size: 3vw;}

【讨论】：

【解决方案5】：

<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

我们可以使用 btn-block 进行自动响应。

【讨论】：