Boostrap表底部不显示

Question

我在我的AspNet Web API项目中有一个Bootstrap响应表，它不会在表格中显示脚文字。我的脚文本显示在表格外部的页面顶部。我的意思是，我试图保持引导模式，以底部的页脚，但我不能，这是我的HTML结构：

<div class="container"> 

<div class="table-responsive"> 
     <table class="table table-bordered table-hover" id="Countries"> 
      <thead> 
       <tr> 
        <th> 
         CountryId 
        </th> 
        <th> 
         CountryName 
        </th> 


        <th class="col-md-2"> 
         Action 
        </th> 
       </tr> 
      </thead> 
      <tbody class="tbody"></tbody> 
      <tfoot> All text I put here shows at the top of the page outside of the table</tfoot> 

     </table> 
    </div> 
</div> 

Answer 1

这是非常简单的，因为你没有在页脚的定义任何行为什么。并且还要记住只使用表格而不是表格而不是div。

看下面的代码。

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <table class="table table-responsive table-bordered table-hover" id="Countries"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
      CountryId 
 
     </th> 
 
     <th> 
 
      CountryName 
 
     </th> 
 
     <th> 
 
      Action 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="tbody"></tbody> 
 
    <tfoot> 
 
     <tr> 
 
     <td colspan="3">All text you were puting here was shown at the top of the page outside of the table but now it is not.</td> 
 
     </tr> 
 
    </tfoot> 
 
    </table> 
 
</div>