16

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 &#187;</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>&copy; 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>

您不能使用选择属性，而是可以创建自己的属性并在<ul>元素中使用它们

也许这会帮助你

首先是html代码

<div id="language">Change Lang</div>
<ul id="lang">
    <li>
        <a href="" name="lang" data-val="de">
           <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/ad-icon.png"/>
        English</a></li>
    <li>
        <a href="" name="lang" data-val="he">
            <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/il-icon.png"/>
            Hebrew</a></li>
</ul>

接下来是jquery代码

$("#language").click(function(){
   $("#lang li").slideToggle();
});

$("#lang li").click(function() {
    var url = location.href = "index.php?lang=" + $(this).find('a').attr("data-val");
   location.href =url;
});

我没有插件就做到了。

请注意，我创建了一个data-val属性，以便存储所需的语言。我使用 jquery 代码获取此属性

4

4 回答 4

21

我知道这个帖子已有几个月的历史，但我也知道，当有人发布适用于他们类似情况的答案时，我真的很感激。这是我在引导程序 2 和 3 中的做法。

.cw-table-list{
    margin:0px !important;
    table-layout:fixed;  
  }
  .cw-table-list td{
    padding-bottom: 0px !important;  
    overflow:hidden;
  }

希望这可以帮助。抽搐

于 2013-08-07T00:08:58.307 回答
15

我不能告诉你解决这个问题的“引导方式”，因为我不使用它。我可以告诉你原因：你的内容在那个断点处不允许它。

因为表格的行不会环绕（即每行的所有单元格必须出现在同一行），所以每个给定表格都可以调整到一个绝对最小宽度，这取决于填充和每个单元格的最宽的非包装内容。对于您的表格，它们可以走的最小尺寸是“Column”、“Column”和“10/11/2012”的宽度等于加上 48px（每边 8px 填充乘以 3）。

span4s 只允许为 724px（祖先元素上的定义）的 31.49% ，.container其宽度不足以包含尽可能小宽度的表格。

我的建议是不要尝试将所有 3 张桌子并排放置。您的显示器必须非常宽，才能使它看起来不拥挤并且没有水平滚动。

于 2013-02-17T22:54:23.863 回答
10

您可以应用样式=“溢出：自动；” 在您的桌子上放置一个水平滚动条。因此，设计仍将保持响应。按照代码：

.table-scrollable{
    overflow: auto;
}

并在您的父 div 上使用它：

<div class='table-scrollable'>
于 2013-05-05T22:44:35.790 回答
3

分配表格的容器元素overflow: auto;和表格本身table-layout: fixed; 

.ie-table-fix {
    overflow: auto;
}
.ie-table-fix > table {
    table-layout: fixed;
}
于 2014-10-09T16:44:38.367 回答