Question

我试图将一个facebook页面插件放在bootsrap的网格中。所以facebook的插件适应容器宽度，但不是动态的。这意味着插件在页面加载时呈现一次，并且不会在窗口重新调整大小时调整大小。任何报价如何解决？

使用此代码可以看到简单示例：

<!DOCTYPE html>

<html>
    <head>
</script>


        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title><?php echo $page->title; ?></title>



        <!--adding useful tools-->
        <!--jquery-->
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <!--bootstrap stuff-->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>




<body>

<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.4";
        fjs.parentNode.insertBefore(js, fjs);
    }
(document, 'script', 'facebook-jssdk'));
</script>


<div class="container">
    <div class="row">


        <!--facebook app box-->
        <div class="col-sm-4" style="background-color:pink;">
                <div style='margin:20px'>
                    <div class="fb-page" data-href="https://www.facebook.com/BambolaPuppetShow?fref=ts" 
                    data-width="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" 
                    data-show-facepile="true" data-show-posts="true" data-height='600'>
                        <div class="fb-xfbml-parse-ignore">
                            <blockquote cite="https://www.facebook.com/BambolaPuppetShow?fref=ts">
                                <a href="https://www.facebook.com/BambolaPuppetShow?fref=ts">‎באמבולה - תיאטרון בובות לילדים‎ </a>
                            </blockquote>
                        </div>
                    </div>
                </div>
        </div>

        <div class="col-sm-8">

            <div class="row">

                <!--schadual box-->
                <div class="col-sm-6" style="background-color:red;">
                    shows
                </div>

                <!--general info box-->
                <div class="col-sm-6" style="background-color:blue;">

                    <div>
                        other content
                    </div>

                    <div id='main_page_text'>
                        some more content
                    </div>
                </div>


            </div>

            <div class="row">

                <div class="col-sm-12" style="background-color:green;">
                    banner
                </div>

            </div>

        </div>

    </div>



</div>


</body>

</html>

Answer 1

检查您是否使用min-width: 100% !important; width: 100% !important;删除了旧的CSS，这对我有用。由于他们在6月更新了api，因此只用adapt-container-width

解决了这个问题

修改：同样来自页面插件页面：https://developers.facebook.com/docs/plugins/page-plugin#resizing

无动态调整大小



插件将在页面加载时确定其宽度



后，不会对框模型的更改做出反应。

facebook页面插件不适应bootstrap的专栏

1 个答案: