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

这很可能是因为您将父作为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

Answer 2

我通过将容器的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。

Twitter＆＃34;关注＆＃34;在Bootstrap中导致水平滚动条的按钮

2 个答案: