引导按钮折叠到第二行答案

【问题标题】：Bootstrap Button Collapse to second line引导按钮折叠到第二行
【发布时间】：2016-08-08 20:15:39
【问题描述】：

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

代码：

<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>

电流输出：

____小屏_____________大屏

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

在

facebook

【问题讨论】：

添加a { word-wrap: break-word; }到你的CSS
也可以试试white-space: normal;。

标签： jquery html css twitter-bootstrap font-awesome

【解决方案1】：

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

Bootstrap 往往有一些隐藏的 CSS。

尤其是那个：overflow: hidden;，它有时不能使工作包工作！

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

希望这能解决您的问题！

【讨论】：