Bootstrap 按钮折叠到第二行

Question

我想知道是否有办法让按钮自动垂直增长以显示整个标签，而不是使用 bootstrap 和超棒的字体将其切断。

代码：

<div class="well well-sm"> 
    <p><h5 style="underline"><u>Social Media:</u></h5></p>
    <p>
    <a href="" class="btn btn-block btn-social btn-facebook" target="_blank">
        <i class="fa fa-facebook"></i> <font size="2"> Like us on Facebook</font>
    </a>
    <a href="" class="btn btn-block btn-social btn-twitter" target="_blank">
        <i class="fa fa-twitter"></i> <font size="2"> Follow us on Twitter</font>
    </a>
    <a href="" class="btn btn-block btn-social btn-pinterest" target="_blank">
        <span class="fa fa-youtube-play"></span> <font size="2"> Watch us on YouTube</font>
    </a>
    </p>
</div>

当前输出：

____Small screen_____________large 屏幕

...大屏幕很好，但我希望小屏幕按钮的输出如下：

在<-第一行给我们点赞

facebook <-第二行

Answer 1

当然，上面的答案（由 Ryan）会起作用 word-wrap: break-word;，但一些关于 Bootstrap 的亮点。

Bootstrap 往往有一些隐藏 CSS。

尤其是 overflow: hidden; 有时无法进行工作包装！

最后，尝试 inspect 该网站以查看您的代码到底发生了什么。

希望这能解决您的问题！

Bootstrap 按钮折叠到第二行

Bootstrap Button Collapse to second line

html

css

jquery

twitter-bootstrap

font-awesome