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>