CSS 如何使用 Bootstrap "row" 和 "col-*-*" 转换基于表格的布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32741186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert table based layout with Bootstrap "row" and "col-*-*"
提问by Kiran
I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.
我正在基于表格布局（无 div）的网站上工作。现在需求发生变化，必须重新创建，使其看起来响应迅速，为了响应，我们选择引导程序作为选项。
Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.
现在，如何将表格布局转换为引导网格布局，以便 1. 外观不变，2. 也具有响应性。
table-layout is too complex in site. lots of nesting is there. For example:
现场的表格布局过于复杂。有很多嵌套。例如：
<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </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>
For example how can I convert above code with bootstrap row, col-*-*grid-layout.
例如，如何使用 bootstrap row、col-*-*grid-layout转换上述代码。
Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.
相信我，我尝试了很多来转换它，但有时看起来会改变，或者有时根本不起作用。
General suggestion on how to convert table base layout into bootstrap are also welcome.
也欢迎关于如何将 table base layout 转换为 bootstrap 的一般建议。
回答by Adam Milecki
Here is some great literature: Bootstrap 3 Grid system
这里有一些很棒的文献：Bootstrap 3 Grid system
- Replace table and tbody with
div class="container" - Replace tr with
div class="row" - Replace td with
div class="col-ww-nn"- Where
wwis device width (xs,sm,md,lg) - Where
nnis a number 1-12 for width percentage (divided by 12)
- Where
- 将 table 和 tbody 替换为
div class="container" - 将 tr 替换为
div class="row" - 将 td 替换为
div class="col-ww-nn"ww设备宽度在哪里(xs,sm,md,lg)nn宽度百分比的数字 1-12在哪里（除以 12）
Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xsdevices) your second main column would be a separate line. And you can make images responsive with img-responseso that it's size changes with the device.
以下是您更新的代码（也包括一些语法修复）。请注意，我添加了响应能力，因此在手机（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">
</div>
<div class="col-xs-4 col-sm-4">
<img src="#" class="img-responsive">
</div>
<div class="col-xs-4 col-sm-4">
</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>
回答by jazzgot
Actually it is not so complex.
其实没有那么复杂。
Just skip every <table>and <tbody>tag, treat every <tr>as block element with class="row"and every <td>as block element with class="col-*-*". Nesting Bootstrap grid is totally okey, so if you have somthing like that:
只需跳过每个<table>和<tbody>标记，将每个都<tr>视为块元素，class="row"并将每个<td>视为块元素class="col-*-*"。嵌套 Bootstrap 网格完全没问题，所以如果你有这样的东西：
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
</tr>
Just do:
做就是了：
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<img border="0" src="#" width="100" height="300">
</div>
<div class="col-xs-10"> </div>
<div class="col-xs-2">
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</div>
</div>
</div>
</div>
Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)
当然，这些只是示例 Bootstrap 类-您不必坚持使用数字；)
