当用户调整浏览器大小时如何在整个页面上放置水平滚动条
http://jsfiddle.net/czaL4te7/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body style="background-color:yellow">
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading text-center" style="background-color:red;color:white;">Sources</div>
<div class="panel-body">
<div class="row">
<table class="table-bordered">
<tr>
<td style="background-color:red;">Label1</td>
<td><input type="text" /></td>
<td style="background-color:red;">Label2</td>
<td><input type="text" /></td>
<td style="background-color:red;">Label3</td>
<td><input type="text" /></td>
<td style="background-color:red;">Label4</td>
<td><input type="text" /></td>
</tr>
</table>
</div>
<hr>
<div class="row">
<div class="panel-body">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="panel-heading text-center" style="background-color:red;color:white;">Rules</div>
<div class="row">
<div class="col-md-4">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" style="text-align:center;background-color:red;">Common header</th>
</tr>
<tr>
<th style="text-align:left;background-color:red; border: 1px solid white;">Firstname</th>
<th style="text-align:left;background-color:red;">Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel-heading text-center" style="background-color:red;color:white;">Rules</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel-heading text-center" style="background-color:red;color:white;">Rules</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
当用户调整大小时，代码会将控件垂直放置。 但是我不想要那个。 我希望水平滚动出现并保持布局不变。
该页面也应在所有屏幕分辨率下均可工作
请帮助