问Bootstrap3表-如果在容器内，则响应不起作用
EN

Stack Overflow用户

提问于 2016-04-15 15:22:57

回答 2查看 694关注 0票数 0

我正在使用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

如何解决此问题？谢谢

css

twitter-bootstrap-3

回答 2

Stack Overflow用户

发布于 2016-04-15 15:28:40

宽度问题{ .container : 1000px；}

一旦父元素的宽度固定，表响应就不会响应宽度的变化，因为它总是依赖于父元素的宽度。

您可以将容器的宽度更改为%，这样表格将变得有响应。

票数 0

Stack Overflow用户

发布于 2016-04-15 17:03:19

因为引导设置中的类.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; }，它将被修复并且不响应。

=>You可以编辑：

+不设置类.container，将设置新的类.box{width:1000px}

+代码<div class="box"></div>包装你的代码。

你的=>Table将内框宽度1000px和响应式

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36651081

复制

BootStrap3如何禁止响应式布局

css bootstrap