Я пытаюсь поместить плагин страницы facebook в сетку начальной загрузки. Таким образом, плагин 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>
