我在文本编辑器中输入的内容在 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>
出于某种奇怪的原因,它将列嵌套在面板内......
最佳答案
</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>
关于HTML 显示不正确,列嵌套在另一列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21066012/