Question

我正在使用bootstrap3并使我的表响应使用表类响应。我注意到，如果表位于容器内，则水平滚动条在移动视图中无法正确显示。

这是我的代码

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>


<div class="container">

  <p>INSIDE CONTAINER</p>

  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

CSS

.container { width: 1000px; }

bootply

如何解决这个问题？感谢

Answer 1

问题是 .container {width：1000px; }

一旦父级的宽度得到修复，表格响应就不会响应宽度变化，因为它总是取决于父级的宽度。

您可以将容器的宽度更改为％，以便表格响应。

Answer 2

因为引导程序设置中的类.container：

`@media (min-width: 1200px){
  .container {
    width: 1170px;
   }
 }

 @media (min-width: 992px){
  .container {
    width: 970px;
   }
 }

 @media (min-width: 768px){
 .container {
   width: 750px;
   }
 }`

如果您设置.container { width: 1000px; }，它将会修复且无响应 =＆gt;您可以编辑：
+未设置课程.container，您将设置新课程.box{width:1000px}
+代码<div class="box"></div>包裹你的代码。
=＆gt;你的表格将在箱子宽度1000px内并且响应

如果在容器内，Bootstrap3表响应不起作用

2 个答案: