如何使用Bootstrap的“row”和“col-*-*”将基于表格的布局转换为网格布局？

Question

我正在开发一个基于表格布局（没有div）的网站。现在需求改变，必须重新创建网站以便它看起来是响应式的，并且我们选择了Bootstrap作为响应式解决方案。

那么，我该如何将表格布局转换为Bootstrap网格布局，以使其既不改变外观，又具有响应式功能呢？

在网站中，表格布局过于复杂，有很多嵌套。例如：

<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
    <table border="0">
        <tr valign='bottom'>
            <td width='50'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</td>
            <td>
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </td>
        </tr>
    </table>
</td>
<td align='right'>
    <table border="0" cellspacing="0">
        <tr>
            <td align='center' colspan='3'>
                <span>Another tesing text</span>
                <span style='color:#FFFFCC;'> - </span>
                <span style='font-size:11px;color:#fffff;'>Random text</span>
            </td>
        </tr>
    </table>
</td>
</tr>

例如，我如何使用Bootstrap的row，col-* - *网格布局转换上面的代码。

相信我，我尝试了很多次去转换它，但有时外观会改变，有时根本不起作用。

欢迎提出有关如何将基于表格的布局转换为Bootstrap的一般建议。

- Kiran

---

你可以在Bootstrap中嵌套行和列，就像表格一样，其中<tr>变成.row，<td>变成.col--. Bootstrap列网格有12个列，所以你需要进行一些数学计算。 - Destination Designs

Answer 1

这里有一些优秀的文献: Bootstrap 3 网格系统

• 将表格和 tbody 替换为 div class="container"
• 将 tr 替换为 div class="row"
• 将 td 替换为 div class="col-ww-nn"
  • 这里，ww 是设备宽度 (xs, sm, md, lg)
  • 这里，nn 是一个数字，范围是1到12，表示宽度百分比（除以12）

下面是您更新后的代码（包括一些语法修复）。请注意，在手机上（xs 设备）中，您的第二个主列将成为单独的一行。您可以使用 img-response 使图像具有响应性，这样它的大小会随着设备而改变。

<div class="container" style="background-color:#ff00ff">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <img src="#" class="img-responsive">
                </div>
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="font-size:10px;color:#cccccc;">Alpha testing</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-4 col-sm-4">
                    <span>Another tesing text</span>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="color:#ffffcc;"> - </span>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="font-size:11px;color:#ffffff;">Random text</span>
                </div>
            </div>
        </div>
    </div>
</div>

- Adam Milecki

---

谢谢，但我有一个问题——在阅读Bootstrap文档时，我也发现容器(container)或容器流(container-fluid)不可嵌套。那么，像你在代码中嵌套这样做是否可以呢？ - Kiran

好发现。你虽然可以这么做，但为了正确使用Bootstrap，不应该嵌套容器，因为这可能会导致意想不到的行为。我已经相应地更新了我的代码，只需删除内部容器即可。我猜我们一起学习。 - Adam Milecki

如果我的表格中有超过12列，该怎么办？ - danielrvt

@danielrvt Bootstrap的容器行和列旨在用于响应式页面布局，以替代使用表格的旧方法。表格仍应用于实际数据表。如果您需要在一行中使用超过12列，则需要覆盖Bootstrap默认值以相应地更新百分比。请注意，您还需要覆盖列偏移、推送和拉动。 - Adam Milecki

Answer 2

实际上并不复杂。

只需跳过每个和标签，将每个视为具有class="row"的块元素，将每个

视为具有class="col-*-*"的块元素。嵌套Bootstrap网格是完全可以的，因此如果您有像这样的内容： <tr style='padding-bottom:1em;'> <td> <table border="0"> <tr valign='bottom'> <td width='50'>&nbsp;</td> <td> <img border="0" src="#" width="100" height="300"> </td> <td width='25'>&nbsp;</td> <td> <span style='font-size:10px;color:#cccccc;'>Alpha testing</span> </td> </tr> </table> </td> </tr> 只需要做以下操作： <div class="row"> <div class="col-xs-6"> <div class="row"> <div class="col-xs-6">&nbsp;</div> <div class="col-xs-6"> <img border="0" src="#" width="100" height="300"> </div> <div class="col-xs-10">&nbsp;</div> <div class="col-xs-2"> <span style='font-size:10px;color:#cccccc;'>Alpha testing</span> </div> </div> </div> </div> 当然，这些只是Bootstrap类的示例 - 你不必坚持使用数字 ;)

- jazzgot