整个屏幕的Bootstrap 4表 [英] Bootstrap 4 table using whole screen

问题描述

根据客户的要求，我试图使页面占据页面的整个宽度.我尝试执行以下操作.表格的左侧离左侧边缘10像素，但表格的右侧仍然有很多空白.

I'm trying to make my page take up the entire width of the page, as per my client's requirement. I tried to do the following. The left side of the table is 10px from the left edge, but there's still a ton of whitespace to the right of the table.

<div class="container"  style="margin: 10px" >
  <div class="table-responsive">
    <table class="table table-bordered table-sm table-striped">

推荐答案

container的最大宽度可以为1140px.如果要使用full-width表，请使用container-fluid而不是container类.

container can have a maximum width of 1140px. If you want full-width table, use container-fluid instead of the container class.

Container是一个块元素.它在其父代的中心与下面的代码对齐.

Container is a block element. It is aligned in the center of its parent with the code below.

.container {
    margin-right: auto;
    margin-left: auto;
}

style="margin: 10px"覆盖上面的代码.因此，容器不再位于中心:位于其父容器的左侧.

style="margin: 10px" override the code above. Hence, the container is not any more in the center: it is on the left side of its parent.

要解决此问题，请直接为表格添加样式. table没有margin-left和margin-right，但是有margin-bottom:1rem.而这取决于您是否覆盖它.

To fix the issue, add the style directly for the table. The table does not have margin-left and margin-right, but it has margin-bottom:1rem. And that is up to you whether you override it or not.

.m-10px {
  margin: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="table-responsive">
    <table class="table table-bordered table-sm table-striped m-10px">
      <thead>
        <tr>
          <th scope="col ">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这篇关于整个屏幕的Bootstrap 4表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！