HTML 显示不正确，列嵌套在另一列中

Question

我在文本编辑器中输入的内容在 chrome 和 firefox 中都无法正确显示，我已经多次检查我的代码并且已经有了 linter。

所以我写的代码是

<div class="row">
    <div class="col-md-5 col-md-offset-1">
      <div class= "panel panel-danger" id= "list_down">
        <div class="panel-heading">Your Forms</div>
        <table class= "table table-hover">
          <thead>
          <tr>
            <th>Application</th>
            <th>Month</th>
            <th>Due Date</th>
            <th>Completion</th>
          </tr>
        </thead>
        <tbody>
          <tr href ="google.com">
              <td>Project Manager</td>
              <td>February</td>
              <td>02/1/2013</td>
              <td>Not Completed</td>
            </tr>
          </tbody
        </table> <!-- table -->
      </div> <!-- panel -->
      </div> <!-- column -->
  <div class="col-md-3" id="list_down">
        <h4>Data Analysis</h4>
      </div> <!-- columns 2 -->
  </div> <!-- row 2 -->

所以我的行中应该有 2 个列，但是 Web 控制台显示的是

<div class="row">
    <div class="col-md-5 col-md-offset-1">
      <div class="panel panel-danger" id="list_down">
        <div class="panel-heading">Your Forms</div>
        <div class="col-md-3" id="list_down">
        <h4>Data Analysis</h4>
      </div><table class="table table-hover">
          <thead>
          <tr>
            <th>Application</th>
            <th>Month</th>
            <th>Due Date</th>
            <th>Completion</th>
          </tr>
        </thead>
        <tbody>
          <tr href="google.com">
              <td>Project Manager</td>
              <td>February</td>
              <td>02/1/2013</td>
              <td>Not Completed</td>
            </tr>
          </tbody> <!-- table -->
       <!-- panel -->
       <!-- column -->
   <!-- columns 2 -->
   <!-- row 2 -->

 <!-- container -->

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$( ".clipboard_icon" ).click(function() {
  $( this ).hide();
  $( ".clipboard_icon_active").show();
  $( ".form_notif").show();
  $( ".msg_icon").show();
  $( ".msg_icon_active").hide();
  $( ".msg_notif").hide();

});

$( ".clipboard_icon_active" ).click(function() {
  $( this ).hide();
  $( ".form_notif").hide();
  $( ".clipboard_icon").show();
});

$( ".msg_icon" ).click(function() {
  $( this ).hide();
  $( ".clipboard_icon_active").hide();
  $( ".form_notif").hide();
  $( ".msg_icon_active").show();
  $( ".msg_notif").show();
  $( ".clipboard_icon").show();
});

$( ".msg_icon_active" ).click(function() {
  $( this ).hide();
  $( ".msg_notif").hide();
  $( ".msg_icon").show();
});

$('tr').click(function() {
    if($(this).attr('href') !== undefined)
{
    document.location = $(this).attr('href');
}
});
</script>  </table></div></div></div>

出于某种奇怪的原因，它将列嵌套在面板内......

Answer 1

</tbody>标签没有关闭你错过了“>”，我没有看到其他问题或者面板主体:

    <div class="row">
        <div class="col-md-5 col-md-offset-1">
          <div class= "panel panel-danger" id= "list_down">
            <div class="panel-heading">Your Forms</div>
            <div class="panel-body">
               <table class= "table table-hover">
                 <thead>
                   <tr>
                     <th>Application</th>
                     <th>Month</th>
                     <th>Due Date</th>
                     <th>Completion</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr href ="google.com">
                     <td>Project Manager</td>
                     <td>February</td>
                     <td>02/1/2013</td>
                     <td>Not Completed</td>
                   </tr>
                 </tbody> <!-- HERE! -->
               </table> <!-- table -->
           </div> <!-- panel body -->
          </div> <!-- panel -->
       </div> <!-- column -->
      <div class="col-md-3" id="list_down">
            <h4>Data Analysis</h4>
          </div> <!-- columns 2 -->
      </div>