Bootstrap 4桌全屏使用(Bootstrap 4 table using whole screen)

我试图让我的页面占据页面的整个宽度，按照我的客户的要求。 我试图做到以下几点。 该表的左侧距离左边缘10px，但表格右侧仍有大量空白。

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

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类。

https://codepen.io/anon/pen/rvXYPp

---

Container是一个块元素。 它的父母中心与下面的代码一致。

.container {
    margin-right: auto;
    margin-left: auto;
} 
  
 
 
 style="margin: 10px"覆盖上面的代码。 因此，容器不再位于中心：它位于其父项的左侧。 
 
 
 要解决该问题，请直接为该表添加样式。 该table没有margin-left和margin-right ，但它具有margin-bottom:1rem 。 无论你是否覆盖它，这取决于你。 
 
 
 
  
  
.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> 
  
 
 
 https://codepen.io/anon/pen/GdVOwV 
container can have a maximum width of 1140px. If you want full-width table, use container-fluid instead of the container class.
 
https://codepen.io/anon/pen/rvXYPp
 
 
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" override the code above. Hence, the container is not any more in the center: it is on the left side of its parent. 
 
 
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> 
  
 
 
https://codepen.io/anon/pen/GdVOwV