如何使用 Bootstrap “行"转换基于表格的布局和“col-*-*" [英] How to convert table based layout with Bootstrap "row" and "col-*-*"

问题描述

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

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

站点中的表格布局过于复杂.有很多嵌套.例如:

<tr style='padding-bottom:1em;'><td><表格边框=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 测试</span></td></tr></td><td align='right'><table border="0" cellspacing="0"><tr><td align='center' colspan='3'><span>另一个测试文本</span><span style='color:#FFFFC;'>- </span><span style='font-size:11px;color:#fffff;'>随机文本</span></td></tr></td></tr>

例如，我如何使用 bootstrap row、col-*-* 网格布局转换上述代码.

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

也欢迎关于如何将 table base layout 转换为 bootstrap 的一般建议.

解决方案

这里有一些很棒的文献:Bootstrap 3 网格系统

• 用 div class="container"
替换 table 和 tbody
• 用 div class="row"
替换 tr
• 用 div class="col-ww-nn" 替换 td
  • 其中ww 是设备宽度(xs、sm、md、lg>)
  • 其中 nn 是 1-12 的数字，表示宽度百分比(除以 12)

以下是您更新后的代码(也包括一些语法修复).请注意，我添加了响应能力，因此在手机(xs 设备)上，您的第二个主列将是单独的一行.您可以使用 img-response 使图像具有响应性，以便其大小随设备而变化.

<div class="row"><div class="col-xs-12 col-sm-6"><div class="row"><div class="col-xs-4 col-sm-4">&nbsp;
<div class="col-xs-4 col-sm-4"><img src="#" class="img-responsive">

<div class="col-xs-4 col-sm-4">&nbsp;

<div class="col-xs-4 col-sm-4"><span style="font-size:10px;color:#cccccc;">Alpha 测试</span>