Почему содержимое <table> выходит за рамки "span" BootStrap и перекрывается при некоторых разрешениях?

JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/ Полный экран JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/embedded/result/

У меня есть эти три div в нижней правой части страницы, каждая из которых содержит html-таблицу с текстом, и все это отлично отображает большинство разрешений на рабочем столе.

Однако, когда я сжимаю свое окно по горизонтали или когда я просматриваю его на определенных мобильных устройствах, содержимое таблиц перекрывает друг друга.

Эта проблема возникает так же, как размер окна ниже ширины 979 пикселей, что совпадает с запросом на загрузку boot-copyive.css для размера планшета, поэтому я уверен, что это связано, но я не знаю, как и почему.

Проблема также совпадает с шириной, с которой navbar поверх вершины исчезает, но опять же, я не знаю достаточно, чтобы сказать, как и почему.

Единственная другая полезная вещь, которую я обнаружил, заключается в том, что когда размер окна задается таким образом, что проблема существует, когда я наматываюсь на элементы span или table в окне отладчика "Элементы" в Chrome, я могу ясно видеть, что столбцы таблиц выходят за размер самих таблиц и проделывают размеры div4 span, которые содержат таблицы.

Я действительно не хочу, чтобы содержимое переполнялось заметно, что, я думаю, является текущей проблемой, однако я также не хочу скрывать или прокручивать переполнение. Мне бы очень хотелось, чтобы текст таблицы оставался с неперекрывающимся размером, пока таблицы /span 4s не будут реагировать ответственно, укладываясь друг на друга, когда экран становится слишком узким.

Любая помощь будет принята с благодарностью.

Кажется, что это чрезмерно, но я предполагаю, что 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 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 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 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 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 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 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 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 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 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 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 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>

Ответ 1

Я не могу сказать вам путь "Bootstrap", чтобы исправить это, так как я его не использую. Я могу рассказать вам, почему: ваш контент не позволяет это в точке останова.

Поскольку строки таблиц не обертываются (т.е. все ячейки для каждой строки должны отображаться в одной строке), существует абсолютная минимальная ширина, с которой каждая заданная таблица может изменяться до размера, что зависит от таких вещей, как paddings и самого широкого содержимого без оболочки для каждой ячейки. Для ваших таблиц наименьшее, на что они могут пойти, - это то, что ширина "Столбец", "Столбец" и "10/11/2012" равны плюс 48 пикселей (8 пикселей на каждую сторону 3).

span4 разрешено только 31.49% из 724px (определение в элементе предка .container), которое недостаточно велико, чтобы содержать таблицы с минимальной возможной шириной.

Моя рекомендация состояла бы в том, чтобы не пытаться размещать все 3 таблицы рядом. Ваш дисплей должен быть исключительно широким, чтобы он не выглядел стесненным и не имел горизонтальной прокрутки.

Ответ 2

Я знаю, что эта тема несколько месяцев, но я также знаю, что я действительно ценю, когда кто-то отправляет ответ, который работал для их аналогичной ситуации. Вот так я сделал это в бутстрапе 2 и 3.

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

Надеюсь, это поможет. Twitch

Ответ 3

Вы можете применить стиль = "переполнение: авто;" для установки горизонтальной полосы прокрутки за столом. Таким образом, дизайн будет по-прежнему оставаться отзывчивым. Следуйте за кодом:

.table-scrollable{
    overflow: auto;
}

И используйте его в своем родительском div:

<div class='table-scrollable'>

Ответ 4

Назначьте элемент контейнера таблицы overflow: auto;, а сама таблица - table-layout: fixed;

.ie-table-fix {
    overflow: auto;
}
.ie-table-fix > table {
    table-layout: fixed;
}