JSFiddle：
http://jsfiddle.net/ardave/8DR6n/3/
全屏JSFiddle： http://jsfiddle.net/ardave/8DR6n/3/embedded/result/
全屏JSFiddle： http://jsfiddle.net/ardave/8DR6n/3/embedded/result/
我在页面右下方有这三个div,每个div都包含一个带有文本的html表,大多数桌面分辨率都显示出来.
但是,当我缩小窗口水平,或者当我在某些移动设备上查看窗口时,表的内容相互重叠.
这个问题出现就像窗口大小在979像素宽以下,这与平板电脑大小的引导响应css媒体查询重合,所以我确信这是相关的,但我不知道如何确定如何或为什么.
这个问题也与顶端导航栏的宽度消失一样,尽管如此,我还不知道如何或为什么.
我发现唯一其他可能有用的事情是,当窗口的大小使问题存在时,当我将鼠标悬停在Chrome中的“Elements”调试器窗口中的span或table元素时,我可以清楚地看到,列延伸超过表本身的大小,并超过包含表的span4 div的大小.
我真的不希望内容溢出可见,我认为是当前的问题,但是我也不想隐藏或滚动溢出.我真的只是喜欢桌面文字保持不重叠的大小,直到桌面/ span4s被迫通过叠加在一起,一旦屏幕变得太窄,就会反应响应.
任何帮助将不胜感激.
似乎可能会过多,但我猜想,我希望我包含代码本身,而不仅仅是链接到jsfiddle,所以这里(假设引导引导和引导响应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>
解决方法
我不能告诉你“引导方式”来解决这个问题,因为我不使用它.我可以告诉你为什么：你的内容不允许在那个断点.
因为表的行不会包围(即,每一行的所有单元格都必须出现在同一行上),所以每个给定的表都有一个绝对的最小宽度,可以根据paddings和每个单元最广泛的非包装内容.对于你的表,最小的可以是“列”,“列”和“10/11/2012”的宽度等于加上48px(每边8px的填充时间3).
span4s只允许为724px(.container祖先元素中的定义)的31.49％,它不够宽,不足以将它们的宽度最小化.
我的建议是不要尝试将所有3张桌子并排放置.您的显示器必须非常宽,才能看起来不够狭窄,而且没有水平滚动.
