【问题标题】: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>

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

【问题讨论】:

  • 请提供一个jsBin 与此问题相关的示例。

标签: css twitter-bootstrap button twitter-bootstrap-3


【解决方案1】:

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

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

http://jsfiddle.net/ADewB/

【讨论】:

  • 设置按钮的宽度会破坏响应式按钮的目的。
  • 您不必设置宽度,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 查询来缩放不同视口宽度上的按钮..

演示:http://bootply.com/93706

【讨论】:

  • 小屏幕上的小按钮 - 手指粗的人更难点击
  • @geo1701 不幸的是,较小的分辨率并不总是意味着较小的屏幕。
【解决方案4】:

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

.btn {font-size: 3vw;}

演示: http://www.bootply.com/7VN5OCVhhF

1vw 是视口宽度的 1%。更多信息:http://www.sitepoint.com/new-css3-relative-font-size/

【讨论】:

    【解决方案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 进行自动响应。

    【讨论】:

      猜你喜欢
      • 2015-12-21
      • 2013-11-24
      • 2017-04-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-12
      • 1970-01-01
      相关资源
      最近更新 更多