css - 如何在引导程序 3 中获得响应按钮

Question

我正在使用引导程序 3，并且我有以下 html：

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

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

score 87 · Accepted Answer

在 Bootstrap 中，.btn该类有一个white-space: nowrap;属性，使按钮文本不会换行。因此，在将其设置为normal并给出按钮 awidth之后，如果文本超过 set ，则文本应该换行到下一行width。

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

score 33 · Accepted Answer

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

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

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

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

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

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

score 17 · Accepted Answer

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

score 4 · Accepted Answer

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

.btn {font-size: 3vw;}

score 2 · Accepted Answer

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

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

5 回答 5