Question

大家好我想让500x200的iframe位于选项卡的右侧。如果标签的数量超过200高度，那么id就像能够使它们可滚动一样。有人能指出我正确的方向吗？我最终将iframe放在一个面板中，让面板的大小为col-lg-9，以填充剩余的空间。

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <ul class="nav nav-pills nav-stacked" id="myTabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#dpa" data-toggle="tab">DPA</a></li>
              <li><a href="#rn" data-toggle="tab">Antwon</a></li>
              <li><a href="#sss" data-toggle="tab">SSS</a></li>
              <li><a href="#ad" data-toggle="tab">Ad</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane active" id="home">
                  <p>test</p>            
                </div>
              <div class="tab-pane" id="dpa" data-src="http://www.google.ie">
                  <iframe src="" width="500" height="200"></iframe>
                </div>
              <div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
                  <iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/37138051">ANTWON ♦ HELICOPTER</a> from <a href="http://vimeo.com/tauszik">Brandon Tauszik</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
                </div>
                <div class="tab-pane" id="sss" data-src="http://www.reddit.com/">
                  <iframe src="" width="500" height="200"></iframe>
                </div>
              <div class="tab-pane" id="ad" data-src="http://player.vimeo.com/video/37138051?badge=0">
                  <iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/37138051">ANTWON ♦ HELICOPTER</a> from <a href="http://vimeo.com/tauszik">Brandon Tauszik</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$('#myTabs').bind('show', function(e) {  
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if($(paneID+" iframe").attr("src")=="")
    {
        $(paneID+" iframe").attr("src",src);
    }
});

</script>

Answer 1

那么，这样的事情呢？

#myTabs {float:left; height:200px; overflow:auto; }

Bootstrap侧选项卡式窗格

1 个答案: