JSFiddle： http: //jsfiddle.net/ardave/8DR6n/3/ 全屏 JSFiddle：http: //jsfiddle.net/ardave/8DR6n/3/embedded/result/
我在页面的右下角有这三个 div，每个都包含一个带有文本的 html 表格，并且在大多数桌面分辨率下都可以正常显示。
但是，当我水平缩小窗口或在某些移动设备上查看它时，表格的内容会相互重叠。
这个问题出现在窗口大小低于 979 像素宽时，这与 bootstrap-responsive.css 平板电脑大小的媒体查询一致，所以我确定这是相关的，但我不知道如何或为什么。
问题也与顶部导航栏消失的宽度相吻合，但我也不知道如何或为什么。
我发现的唯一其他可能有用的事情是，当窗口的大小调整为存在问题时，当我将鼠标悬停在 Chrome 的“元素”调试器窗口中的跨度或表格元素上时，我可以清楚地看到表格'列超出了表本身的大小，并且超出了包含表的 span4 div 的大小。
我真的不希望内容明显溢出，我认为这是当前的问题，但是我也不想隐藏或滚动溢出。我真的只是希望表格文本保持不重叠的大小，直到一旦屏幕变得太窄，表格/span4s 被迫通过堆叠在彼此之上做出响应。
任何帮助将不胜感激。
这似乎可能过度，但我想 SO 希望我包含代码本身，而不仅仅是指向 jsfiddle 的链接，所以这里是（假设引用了 bootstrap.css 和 bootstrap-responsive.css）
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">View All</li>
<li><a href="/Search/Search">View All</a>
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="hero-unit">
<h1>My Site Name</h1>
<p>Introductory stuff</p>
<p> <a class="btn btn-primary btn-large" href="/Home/About">About »</a>
</p>
</div>
<div class="container">
<div class="row-fluid">
<div class="span4">
<h2>Newest Entries</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>1/28/2013</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>12/4/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/9/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/30/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/17/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/15/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/29/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/21/2012</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Latest Stuff</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/9/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/7/2012</td>
<td>8.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/4/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/11/2012</td>
<td>7.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/13/2012</td>
<td>9.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/6/2012</td>
<td>7.0</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Needing Inputs</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>1/28/2013</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>12/4/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/18/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/9/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/7/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/5/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/31/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/30/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/30/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/18/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
</tbody>
</table>
</div>
<!--/span-->
</div>
</div>
<div>
<p></p>
<p>Here's a big blob of text!</p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Some Company</p>
</footer>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-collapse collapse"> <a class="brand" href="/">TheSiteName.com</a>
<form action="/Search/Search"
class="navbar-search pull-left" method="get">
<input type="text" class="search-query" placeholder="Search by Name" name="SearchQuery"
/>
</form>
<form ReturnUrl="" action="/Account/ExternalLogin" class="navbar-form pull-right"
method="post">
<button type="submit" name="provider" value="facebook" class="logonpartialextlogin"
title="Log in using your Facebook account">
<img src="/Images/facebook.png" />
</button>
<button type="submit" name="provider" value="twitter" class="logonpartialextlogin"
title="Log in using your Twitter account">
<img src="/Images/twitter-bird-white-on-blue.png" />
</button>
<button type="submit" name="provider" value="google" class="logonpartialextlogin"
title="Log in using your Google account">
<img src="/Images/google-icon.png" />
</button>
</form>
<form action="/Account/Register" class="navbar-form pull-right" method="get">
<button type="submit" class="btn">Register</button>
</form>
<form action="/Account/LogOn" class="navbar-form pull-right" method="post">
<input class="span2" type="text" placeholder="Email" name="UserName" />
<input class="span2" type="password" placeholder="Password" name="Password"
/>
<button type="submit" class="btn">Sign in</button>
</form>
</div>
</div>
</div>
</div>