Twitter“关注”按钮导致 Bootstrap 中的水平滚动条

Question

我的单页应用程序与 Bootstrap 在多种设备上运行良好，但是尽管 Twitter 的“关注”按钮具有响应性，但它​​会在页面上添加一个水平滚动条 - 这会影响我的图像轮播的使用。

我有视口meta： <meta name="viewport" content="width=device-width, initial-scale=1.0;">

这是导致问题的标记：

<div class="row">
    <div class="col-lg-12">
        <a href="https://twitter.com/crmpicco" class="twitter-follow-button" data-show-count="true"
           data-size="large">Follow @crmpicco</a>
        <script>!function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + '://platform.twitter.com/widgets.js';
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, 'script', 'twitter-wjs');</script>
    </div>
</div>

row 和 col-lg-12 类都是 Twitter Bootstrap 的标准类。但只有这段代码在 iPhone 上的 Safari 中引入了水平滚动条。

Answer 1

我通过调整容器的 CSS 来解决这个问题：

.twitter_container {
    padding-top    : 1.5em;
    padding-bottom : 1.5em;
    text-align     : center;
    margin         : 0 auto;
}

并使用data 属性更改 Twitter 按钮的大小：

<div class="twitter_container">
    <a href="https://twitter.com/crmpicco" class="twitter-follow-button" data-show-count="true"
       data-size="medium">Follow @crmpicco</a>
    <script>!function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + '://platform.twitter.com/widgets.js';
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, 'script', 'twitter-wjs');</script>
</div>

你可以看到结果here。

Answer 2

这很可能是因为您的父级是 row 类。

row只有一个主要样式，就是左右两边都有-15px的边距，像这样：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

只需删除类为 row 的父 div 就可以了：

更新代码：

<div class="col-lg-12">
    <a href="https://twitter.com/crmpicco" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @crmpicco</a>
    <script>!function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + '://platform.twitter.com/widgets.js';
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, 'script', 'twitter-wjs');</script>
</div>

EXAMPLE WITH ROW

EXAMPLE WITHOUT ROW