引导表在移动视图上包含 div 重叠答案

【问题标题】：Bootstrap table overlap on containing div on mobile view引导表在移动视图上包含 div 重叠
【发布时间】：2016-05-04 05:53:30
【问题描述】：

我有这个问题，其中表格元素与其包含的 div 重叠，具有特定的高度并且底部内容被隐藏。表格在这个 div 元素内

 <div class="inner bg-danger col-lg-12 col-md-12 col-xs-12">table element</div>

这是https://jsfiddle.net/0rkrd738/的布局

我希望表格能够响应并保留在其包含的 div 中，并包含完整的内容。我试着把所有类 col-md, lg, xs 仍然无济于事。请帮我解决这个问题

【问题讨论】：

即使将表格包装在 .table-responsive 类中，您是否也会遇到同样的问题？
是的，我也试过是一样的

标签： html twitter-bootstrap css

【解决方案1】：

您可以缩小图像并将 table-responsive 类添加到表的父 div（对于非常小的屏幕）。下面是一些css：

.bg-danger .img-circle {
  max-height: 150px;
  width: auto;
}
.bg-danger .table-responsive {
  margin-bottom: 0;  
}
.bg-danger .panel-body {
  padding-bottom: 0;
}

见小提琴https://jsfiddle.net/0rkrd738/3/

【讨论】：

【解决方案2】：

如果您希望所有内容都适合固定高度的 div，则需要将 div 中的所有内容缩小以使其适合，请参阅小提琴https://jsfiddle.net/0rkrd738/2/

.red {
  background-color: red;
  height: 600px;
}

.blue {
  background-color: blue;
  height: 600px;
}

.yellowgreen {
  height: 500px;
}

.panel {
  height: 560px;
}

.panel-body {
  padding-top: 0px;
  padding-bottom: 0px;
}
.panel-footer {
  padding-top: 4px;
  padding-bottom: 4px;
}
td {
  padding: 1px !important;
}
table{margin-bottom: 0px !important;}

【讨论】：