Question

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

现在，我如何将表格布局转换为引导网格布局，以便1.看起来不会改变，2。也有响应。

表格布局在网站上太复杂了。那里有很多筑巢。例如：

<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-*-*网格布局转换上述代码。

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

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

Answer 1

以下是一些很棒的文献：Bootstrap 3 Grid system

用div class="container"
用div class="row"
将td替换为div class="col-ww-nn"
- 其中ww是设备宽度（xs，sm，md，lg）
- 其中nn是宽度百分比（除以12）的数字1-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>

Answer 2

实际上并不是那么复杂。

只需跳过每个<table>和<tbody>代码，将每个<tr>视为具有class="row"的块元素，将每个<td>视为具有{{1}的块元素}。嵌套Bootstrap网格完全没用，所以如果你有这样的东西：

class="col-*-*"

只是做：

<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>

当然，这些只是示例Bootstrap类 - 您不必坚持使用数字;）

如何使用Bootstrap＆＃34; row＆＃34;转换基于表格的布局和＆＃34; col - * - *＆＃34;

2 个答案: