Question

使用Bootstrap的布局,如何在一个布局中完整的显示另外一个HTML文件

这是我的代码:

<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
<ul class="nav bs-docs-sidenav">
<li>
<a href="#overview">概览</a>
<ul class="nav">
<a href="imag/百度一下，你就知道.htm" target="float2">每日编报</a>
<li><a href="#overview-mobile">统计信息</a></li>
<li><a href="#overview-type-links">关键词匹配</a></li>

</ul>
</li>
</ul>
</div>
</div>

<div class="col-md-9" role="main" >
<div class="bs-docs-section">
<h1 id="overview" class="page-header">概览</h1>
<iframe src="imag/百度一下，你就知道.htm" scroling="yes" width="100%" height="300%" name="float" frameborder="0">
</iframe>
<div class="highlight"></div>
</div>
</div>

</div>
</div>

想通过点击左边,将链接的html文件或者网址显示在右边的布局中,但是右边的布局仅仅显示了一部分的网址,我想让所有的网址在右边的布局中全部显示出来.也就是右边的布局需要占满好几行.请问下具体的代码该如何修改呢?

Answer 1

Bootstrap内置了一套响应式、移动设备。

1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
<div class="container">
<div class="row"></div>
</div>

2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>

3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

Answer 2

可以使用iframe实现

Answer 3

右边div自己写，不要用BS的代码~

Answer 4

给iframe设置需要的高度即可。

Answer 5

iframe设置固定的宽高。

追问

请问下 设置成固定的宽高px，而不是采用百分比%的话，不就没法在分辨率不同的显示器上保持一样的效果了吗？

追答

其可以用异步加载页面