0

http://snapwidget.comからの iframe がいくつかあります。問題は、サイズが固定されており、Twitter のブートストラップとうまく連携していないことです。サイズを変更する方法はありますか？または、少なくとも、画面サイズが変化したときに他の div をそれらの下/オーバーラップさせずに、それらの周りを移動させますか?

index.html 

<div class="container">
        <div class="row">
            <div class="span8 stayright">
                <!-- SnapWidget desktop-->
                <div class="instagram_desktop">
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>
                </div>
                <!-- SnapWidget ipad-->
                <div class="instagram_inbetween">          
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NjIwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:620px; height: 620px" ></iframe>
                </div>
                <!-- SnapWidget ipad profile-->
                <div class"instagram_ipad_p">
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NDc2fDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:476px; height: 476px" ></iframe>
                </div>
                <!-- SnapWidget iphone-->
                <div class"instagram_iphone"
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58MzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:370px; height: 370px" ></iframe>
                </div>
            </div>
            <div class="span4 stayleft small1">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span4 stayleft small2">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span8 big2">
                <!-- SnapWidget -->
                <iframe src="http://snapwidget.com/in/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzYwfDF8MXx8eWVzfDB8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>
            </div>

            <div class="span4 r2 small1">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">

            </div>
            <div class="span4 small2">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">

            </div>

            <div class="span4 r3 small1">
                <h2>Something Else</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
</div>

CSS

.stayright {
    float: right;
    height: 100%;
    padding-bottom: 25px;
}

.stayleft {
    float: left;
    height: 100%;
}

.small1 {
    padding-bottom: 15px;
}

.small2 {
    padding: 15px 0 25px 0; 
}

.big2 {
    padding: 25px 0px;
}

.r2 .small1 {
    padding-bottom: 15px;
}

.big2 {
    margin-top: -25px;  
}

@media (min-width: 1024px) {
.instagram_iphone { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 1023px) and (min-width: 769px) {
.instagram_iphone { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_desktop { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 768px) and (min-width: 481px) {
.instagram_desktop { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 480px) and (min-width: 321px) {
.instagram_desktop { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone { display: none !important; }
}

@media (max-width: 320px) {
.instagram_iphone_ls { display: none !important; }
.instagram_desktop { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_ipad_p { display: none !important; }
}
4

2 に答える 2

1

わかりました、ウィジェットを探した後、サイズを変更できますが、ウィジェットの内部は反応しないので役に立ちません。

他に考えられる唯一の方法は、使用している方法 (メディアクエリ) ですが、次の 2 つの理由で機能していません。

<!-- SnapWidget ipad profile-->
            <div class"instagram_ipad_p">

クラスに = ( class="")がありません

<!-- SnapWidget iphone-->
            <div class"instagram_iphone"

div( ) が閉じておら<div>ず、クラスに = がありません。

これらの変更の後、メディアクエリは機能します! フィドル

于 2013-05-03T22:57:09.493 に答える
0

jQuery には resize という便利なメソッドがあります。あなたは何かをすることができます。(コードはテストされていません)

//initially set the iframe's width to the window size
mtarget = getElementById... //get the iframe
mtarget.width = $(window).width;

$(window).resize(function() {
//and again...set the width of the iframe to $(window).width()...?
});

理論的には、それはあなたのiframeがうまく配置されるのを助けるはずです

于 2013-05-03T17:58:04.133 に答える