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>