Question

我很难理解为什么我的桌子不尊重bootstrap的网格系统。我花了大约2个小时来隔离并能够更新错误。请帮忙。

我会发布代码，但我认为您会更容易理解错误this小提琴和full-screen结果。该表不应该尊重Bootstrap的网格系统吗？

  <div class="col-md-8 border">
<div class = "table-responsive">
<table class = "table">
<thead>
<tr>
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AACccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</td>
<td>$1.38</td>
<td>-0.01</td>
<td>-0.36%</td>
<td>$1.39</td>
<td>$1.39</td>
<td>$1.38</td>
</tr>
</tbody>
</table>
</div>  
</div> <!--col-md-8-->

<div class="col-md-4 border">
    <div class="alert alert-dismissable alert-info">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
    </div>
</div>

Answer 1

嗯，确实如此，但您的代码中有几个问题：

1）您必须加载Bootstrap.js

2）您的表格对于您的列非常窄，因此您必须使用更宽的列或编辑切割点

3）你可以削减一些填充以留出更多空间。

4）你的nowrap文本根本不起作用，它不会在野外发生（如果是这样，你可以强制换行）

5）你需要一些特殊的Firefox代码

所有这些，我做了this fiddle，见下面的代码

<强> HTML

<div class="container">
    <div class="row">
        <div class="col-md-9 border">
            <div class="table-responsive">
                <table class="table table-striped table-condensed table-responsive">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Company</th>
                            <th>Price</th>
                            <th>Change</th>
                            <th>Change %</th>
                            <th>Open</th>
                            <th>High</th>
                            <th>Low</th>
                            <th>Volume</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>AACccccccccccccccccccccccccccccccccccc asd asdasd asdasdasdads adasd asdasdasd asdasd</td>
                            <td>$1.38</td>
                            <td>-0.01</td>
                            <td>-0.36%</td>
                            <td>$1.39</td>
                            <td>$1.39</td>
                            <td>$1.38</td>
                            <td>$1.38</td>
                            <td>$1.38</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--col-md-3-->
        <div class="col-md-3 border">
            <div class="alert alert-dismissable alert-info">At vero eoset accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat</div>
        </div>
    </div>
</div>

和 CSS （仅根据Bootstrap guide修复Firefox问题）

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

Answer 2

您的示例中的问题是单词第一个单元格。 CSS默认情况下不会破坏一个单词。要改变你添加TD样式

word-break: break-word;

然后定义TD的百分比宽度

word-break: break-word;
width:15%;

http://jsfiddle.net/e9qhcvsw/8/

但是，请注意，bootstrap在小宽度上添加以下媒体查询：

@media (max-width: 767px)
.table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
   white-space: nowrap;
}

这将停止分词效果，因此您需要覆盖它或不使用表格响应。

最后，我强烈建议使用响应式网格而不是表格。

表不尊重Bootstrap网格

2 个答案: