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

Posted 2023-03-05

【中文标题】如何使用 Bootstrap “row” 和 “col-*-*” 转换基于表格的布局

【英文标题】：How to convert table based layout with Bootstrap "row" and "col-*-*"

【发布时间】：2015-12-20 20:47:36

【问题描述】：

我在基于表格布局（无 div）的网站上工作。现在需求发生变化并且必须重新创建以使其看起来具有响应性，并且对于响应性，我们选择引导程序作为选项。

现在，我如何将表格布局转换为引导网格布局，这样可以 1. 外观不变，2. 也有响应。

table-layout 在站点中过于复杂。有很多嵌套。例如：

<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="#"  >
            </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>

例如，如何使用引导程序row、col-*-* grid-layout 转换上述代码。

相信我，我尝试了很多来转换它，但有时看起来会发生变化，或者有时根本不起作用。

也欢迎关于如何将表格基本布局转换为引导程序的一般建议。

【问题讨论】：

你可以在 bootstrap 中嵌套行和列，就像 变成 .row 和 变成 .col-- 的表一样。引导列网格是 12 列，所以你必须做一些数学运算。

【参考方案1】：

这里有一些很棒的文献：Bootstrap 3 Grid system

用div class="container"替换table和tbody 将 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>

【讨论】：

谢谢，但有一个问题 - 在阅读 Bootstrap 上的文档时，我还发现容器或容器流体不可嵌套。那么，可以像在代码中那样嵌套吗？

很好的发现。您可以摆脱它，但为了正确使用引导程序，您不应该嵌套容器，因为它可能会导致不需要的行为。通过简单地移除内部容器，我已经相应地更新了我的代码。我想我们正在一起学习。

如果我的表中有超过 12 列怎么办？

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

【参考方案2】：

其实没那么复杂。

只需跳过每个<table> 和<tbody> 标签，将每个<tr> 视为带有class="row" 的块元素，将每个<td> 视为带有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="#"  >
            </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="#"  >
            </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 类 - 您不必拘泥于数字；）