Question

我正在摆弄Bootstrap，但由于这一点错误而陷入了停滞状态。

生成的源代码是

<!DOCTYPE html>
  <html>
    <head>
      <title>Anjul Photo Copy</title>
      <link rel="stylesheet" href="/css/bootstrap.min.css">
      <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
      </style>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <script src="js/textrace.js"></script>
            </head>
    <body> 
      <div class="page-header">
        <center><h1>Header <small>Header 2!</small></h1></center>
      </div>
      <span class="span2">
        <div class="well">
      <ul class="nav nav-list">  
        <li ><a tabindex="-1" href="/">Home</a></li>     
        <li ><a tabindex="-1" href="contact.php">Contact us</a></li>
        <li ><a tabindex="-1" href="services.php">Services</a></li>
        <li class='active'><a tabindex="-1" href="dba.php">AayuFill</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
       </ul></div>
 </span>



<span class="span8">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Fathers Name</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>aayush<td><td>agrawal<td><td>Ranjan Agrawal<td><td>4 oriental<td><tr>   </tbody>
    </table>
</span>     
        <div style="clear:both;"><center>Copyright &#169; Anjul Photo Copy</center></div>

    </body>
</html>

但正如您可能看到的那样，表格严重错位。任何有关修复它的建议都非常感谢。

enter image description here

Answer 1

问题是你的表格行结构：

<tr>
  <td>aayush<td>
  <td>agrawal<td>
  <td>Ranjan Agrawal<td>
  <td>4 oriental<td>
<tr>

您没有正确关闭<td>。它应该是：

<tr>
  <td>aayush</td>
  <td>agrawal</td>
  <td>Ranjan Agrawal</td>
  <td>4 oriental</td>
<tr>

您需要使用</td>关闭<td>

Working example here ... W3C Markup Validator是你的恶魔

Twitter引导表搞砸了？

1 个答案: