Question

我一直在使用Bootstrap 3.2.0建立一个网站我在使用面板内的表时遇到了问题，我不确定解决方案。

以此代码为例：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Title
                </div>
                <table class="table">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

我做了sample fiddle来证明有问题的行为。

如果您注意到，在表格的右侧，行边框和面板边框之间存在微小间隙。在某些分辨率/变焦/大小组合时，这个间隙会消失，但在其他分辨率上可见。问题是面板的宽度通常是123.45像素，而表格只有123像素。由于它们都设置为100％宽度，我不知道如何摆脱这个差距。

Answer 1

如果您将.pull-left或.pull-right添加到.panel-default元素，则此问题会消失，但会创建一个新问题...表格不再响应！ http://jsfiddle.net/otjzhv0x/

将style="width:100%添加回该元素，问题将返回：http://jsfiddle.net/L5w8y7zo/

我认为你可能会被困在一个像素的那部分偶尔出现打击。不是说没有办法做到这一点，但这并不容易。

Answer 2

Shawn的回答给了我一个想法，因为你不能强迫桌子稍微大一点以匹配面板，让我们扩大桌子可以扩展到的区域。

我所做的是把表放在里面panel-body，然后我在它上面添加了一些样式：

padding:0px;
margin-right:-1px;

这是一个fiddle来演示。

这个想法是panel-body占据了面板的整个空间。然后删除填充，以便表占用相同的空间。此时，右侧仍然存在偶尔的差距。因此，通过将panel-body的大小增加1px，表格最多将扩展1px，表格边框将与面板边框匹配，并且重叠不明显。如果表格略小，那1px额外费用将会补偿。

这远非正确的解决方案，我欢迎更好的答案。如果表格边框和面板边框是不同的颜色，或者表格有背景颜色，这种方法不会起作用。

消除工作台和面板边缘之间的间隙

2 个答案: