PROSAGA码农传奇-运筹学-动态HTML表td和tr根据条件不能正常工作

<div class =“post-text”itemprop =“text”>
  <P>
    您的代码生成如下所示的HTML：
  </p>
   <pre>
    <code>
      <tbody>
    <td><input type="checkbox" name="prodevxp" value="Program Management"><label for="">&nbsp;Program Management</label></td>
    <td><input type="checkbox" name="prodevxp" value="Finance Administration"><label for="">&nbsp;Finance Administration</label></td>
    <td><input type="checkbox" name="prodevxp" value="Training  Facilitation"><label for="">&nbsp;Training  Facilitation</label></td>
    <td><input type="checkbox" name="prodevxp" value="Operations  Logistics"><label for="">&nbsp;Operations  Logistics</label></td>
    <td><input type="checkbox" name="prodevxp" value="Communications  Media"><label for="">&nbsp;Communications  Media</label></td>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Monitoring  Evaluation"><label for="">&nbsp;Monitoring  Evaluation</label></td>
    </tr>
    <td><input type="checkbox" name="prodevxp" value="Board Goveranance"><label for="">&nbsp;Board Goveranance</label></td>
    <td><input type="checkbox" name="prodevxp" value="Research  Learning"><label for="">&nbsp;Research  Learning</label></td>
    <td><input type="checkbox" name="prodevxp" value="Strategic Planning"><label for="">&nbsp;Strategic Planning</label></td>
    <td><input type="checkbox" name="prodevxp" value="Program Design"><label for="">&nbsp;Program Design</label></td>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Other Area"><label for="">&nbsp;Other Area</label></td>
    </tr>
</tbody>

</code>
  </pre>
  <P>
    看看线条是如何包裹的
     <code>
      <tr>
    </code>
     最终靠自己的路线？你真正想要产生的是这样的：
  </p>
   <pre>
    <code>
      <tbody>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Program Management"><label for="">&nbsp;Program Management</label></td>
        <td><input type="checkbox" name="prodevxp" value="Finance Administration"><label for="">&nbsp;Finance Administration</label></td>
        <td><input type="checkbox" name="prodevxp" value="Training  Facilitation"><label for="">&nbsp;Training  Facilitation</label></td>
        <td><input type="checkbox" name="prodevxp" value="Operations  Logistics"><label for="">&nbsp;Operations  Logistics</label></td>
        <td><input type="checkbox" name="prodevxp" value="Communications  Media"><label for="">&nbsp;Communications  Media</label></td>
        <td><input type="checkbox" name="prodevxp" value="Monitoring  Evaluation"><label for="">&nbsp;Monitoring  Evaluation</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Board Goveranance"><label for="">&nbsp;Board Goveranance</label></td>
        <td><input type="checkbox" name="prodevxp" value="Research  Learning"><label for="">&nbsp;Research  Learning</label></td>
        <td><input type="checkbox" name="prodevxp" value="Strategic Planning"><label for="">&nbsp;Strategic Planning</label></td>
        <td><input type="checkbox" name="prodevxp" value="Program Design"><label for="">&nbsp;Program Design</label></td>
        <td><input type="checkbox" name="prodevxp" value="Other Area"><label for="">&nbsp;Other Area</label></td>
    </tr>
</tbody>

</code>
  </pre>
  <P>
    然后每行包裹一个
     <code>
      <tr>
    </code>
    。你怎么做的呢？好吧，首先尝试将所有项目放在一行：
  </p>
   <pre>
    <code>
      <tbody>
    <tr>
    <?php foreach($array as $key => $item): ?>
        <td><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for="">&nbsp;<?php echo $item; ?></label></td>
    <?php endforeach; ?>
    </tr>
</tbody>

</code>
  </pre>
  <P>
    这是一个良好的开端！您现在需要做的就是让它结束最后一行并每5列开始一个新行。幸运的是，这很容易：
  </p>
   <pre>
    <code>
      <tbody>
    <tr>
    <?php
        $i = 0;
        foreach($array as $key => $item) {
            if($i > 0 && $i % 5 === 0) {
                echo '</tr><tr>';
            }
            $i++;
    ?>
        <td><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for="">&nbsp;<?php echo $item; ?></label></td>
    <?php
        }
    ?>
    </tr>
</tbody>

</code>
  </pre>
  <P>
    普雷斯托！但是，我还是要叫你出去使用桌子。这不是表格数据。这是布局。骗子！因此，让我们试着弄清楚如何以不同的方式做到这一点。看起来你正在使用Bootstrap。
    <EM>
      我想知道它是否有任何可以帮助解决这个问题！
    </EM>
  </p>
  <H1>
    输入
    <a href="http://getbootstrap.com/css/#grid" rel="nofollow">
      网格系统
    </A>
  </H1>
  <P>
    略读一下
    <a href="http://getbootstrap.com/css/#grid" rel="nofollow">
      文件
    </A>
    ，你应该能够很容易地设置一个网格。首先，而不是一个
     <code>
      table
    </code>
    /
     <code>
      tbody
    </code>
    把整个东西包裹起来
     <code>
      container-fluid
    </code>
    。然后，而不是
     <code>
      td
    </code>
    s，将每个项目包装成一个
     <code>
      col-md-2
    </code>
     或者其他的东西。 （实际上，似乎在Bootstrap中没有为五列提供条款，但是有一些条款
    <a href="https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap" title="Five equal columns in twitter bootstrap“>
      关于Stack Overflow的另一个问题
    </A>
    。）结果：
  </p>
   <pre>
    <code>
      <div class="container-fluid">
<?php foreach($array as $key => $item): ?>
    <div class="col-md-2"><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for="">&nbsp;<?php echo $item; ?></label></div>
<?php endforeach; ?>
</div>

</code>
  </pre>
  <P>
    这个解决方案
  </p>
  <UL>
    <LI>
      在语义上更正确
    </LI>
    <LI>
      不要求我们保留额外的索引变量
    </LI>
    <LI>
      响应小屏幕尺寸（我认为）
    </LI>
    <LI>
      <EM>
        更好
      </EM>
    </LI>
  </UL>
</DIV>