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>

当前输出：

____小屏幕______大屏幕

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

像我们一样＆lt; -first line

facebook＆lt; -second line

Answer 1

当然，上面的回答（由Ryan提供）可以起作用word-wrap: break-word;但是有些关于Bootstrap的亮点。

Bootstrap往往有一些隐藏的CSS。

特别是那个：overflow: hidden;，有时候不会做工作包装工作！

最后，尝试inspect网站，以了解您的代码究竟发生了什么。

希望这能解决您的问题！