Question

我遇到这个问题，其中table元素与其包含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仍无济于事。请帮助我解决这个问题

Answer 1

如果你想让所有东西都适合固定的高度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;}

Answer 2

您可以将图像缩小，并将类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/

移动视图上包含div的Bootstrap表重叠

2 个答案: