0

我有几个来自http://snapwidget.com的 iframe 。问题是它们的大小是固定的，并且不能很好地与 twitter bootstrap 配合使用。有没有办法让他们调整大小？或者至少让我的其他 div 在屏幕尺寸变化时不会低于/重叠它们，而是在它们周围移动？

索引.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

好的，在寻找小部件之后，我可以调整它的大小，但是小部件的内部没有响应，所以它没用。

唯一可能的另一种方法是您正在使用的方法（媒体查询），但由于以下两个原因它不起作用：

<!-- 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 回答