jquery - Bootstrap 按钮折叠到第二行

标签 jquery html css twitter-bootstrap font-awesome

我想知道是否有办法让按钮自动垂直增长以显示整个标签,而不是使用 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>

当前输出:

____小屏幕____________大屏幕

enter image description here

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

在<-第一行给我们点赞

facebook <-第二行

最佳答案

当然,上面的答案(由 Ryan 提供)可以 word-wrap: break-word; 但一些关于 Bootstrap 的亮点。

Bootstrap 往往有一些隐藏的 CSS。

尤其是那个:overflow: hidden;,它有时不会使工作包装工作!

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

希望这能解决您的问题!

关于jquery - Bootstrap 按钮折叠到第二行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38827471/

相关文章:

css: 文本应该居中,但事实并非如此,如果我增加边距,它就会居中……不合逻辑吗?

css - 如何将变换比例限制为 CSS 中父元素的宽度和高度?

css - RegExp 搜索并替换 css 中图像的路径

php - 将 php 转换为 jQuery for XML?

javascript - 未知关键字确保问题

javascript - keydown 事件删除我的 div 内容

javascript - 5 星评级系统的 CSS

javascript - 从 html 中的一个 JavaScript 文件调用函数

javascript - 使用 jQuery 改变元素顺序的最佳方法

javascript - 将键盘选项卡焦点设置到页面顶部/使用 JavaScript/jQuery 重置键盘焦点