bootstrap对话框设置水平和垂直滚动条问题

2019独角兽企业重金招聘Python工程师标准>>>

**问题描述：**在pannel内自行添加水平和垂直滚动条时，会遇到pannel内容在随着浏览器放大缩小时（手动拖拽形式），会出现内容超出对话框的情况。

**操作描述：针对这一情况，笔者做了一组该pannel的实验，最终发现在控制pannel的body的div中添加css样式（overflow:auto），即可实现水平和垂直方向的滚动效果（在pannel-heading或者整个pannel的div上添加这个样式，会出现各种奇怪的效果）。但是这里有个前提：**一定要控制pannel宽和高的大小。对于宽度这里并没有设置，但因为pannel被放置在bootstrap栅格布局中，这里设置了class="col-lg-4"，占整个宽度的1/3（全部为12）；对于高度，这里根据现实场景的需要设置了一个数值，下面会介绍。

1）CSS文件：

@CHARSET "UTF-8";

.ontology-overflow {
	overflow:auto;
}

.ontology-left-tree-size {
	height:810px;
}

2）下面这段代码为html对话框部分的原始代码，其中控制对话框body的div的class属性，：

<div class="col-lg-4">
							            
					                    <div class="panel panel-default">
						                        <div class="panel-heading">
						                            <i class="fa fa-tree fa-fw"></i> 对象树
						                        </div>
						                        <div class="panel-body ontology-overflow ontology-left-tree-size">
						                            <div class="row">
						                                <div class="col-lg-12">
						                                    <p>=============================================================================</p>
						                                        h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                         h<br>
						                                        h<br>
						                                        <p></p>
						                                </div>
						                            </div>
						                            <!-- /.row (nested) -->
						                        </div>
						                        <!-- /.panel-body -->
						                    </div>
						            </div>

转载于:https://my.oschina.net/airship/blog/790215