Question

已经过去了圆圈。我有一个Bootstrap 3面板，在面板体内，我是动态添加div（MVC razor）堆叠的：

.test-result {
  float: right;
  width: 150px !important;
  height: 100% !important;
  border: solid 1px;
  min-height: 100% !important;
  background-color: lightgray;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  white-space: normal;
}

一旦超过面板体的宽度，它们显然会开始堆叠等。

我希望面板 - 主体内容并排放置并具有水平滚动条。我已经添加了overflow-x：scroll等和nowrap，但没有任何乐趣。请帮助：）

Answer 1

更新您的CSS，如下所示

您可以根据要滚动的子容器数定义resultContainer的with。因此，如果每个test-result的宽度为150px，并且您希望容纳100个此类容器，则将resultContainer的宽度设置为150 x 100，即15000px。

<style>
    .tab-pane{
        width:100%;
        overflow: auto;
      }
      .resultContainer{
          width:600px;    //4 containers x 150px
      }
      .test-result {
          float: left;
          width: 150px !important;
          height: 100% !important;
          border: solid 1px;
          min-height: 100% !important;
          background-color: lightgray;
          margin-left: auto;
          margin-right: auto;
          padding-left: 15px;
          padding-right: 15px;
          display: inline-block;
          white-space: normal;
    }
    .new-test-group {
        float: left;
        width: 150px !important;
        height: 100% !important;
        border: solid 1px;
        min-height: 100% !important;
        background-color: lightgreen;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        display: inline-block;
        white-space: normal;    
    }
    .eachNewTest {
        border: solid 1px;
        cursor: pointer;
    }
</style>

更新 - 动态添加.resultContainer的宽度

<script>
    $(document).ready(() => {
        let resultContainerWidth = 150;
        let resultContainerCount = $('.test-result').length;
        $('.resultContainer').width(resultContainerWidth * resultContainerCount);
    });
</script>

Answer 2

你可以用这样的div来做到这一点：

<div class="scroll">

</div>

然后您需要应用以下样式：

.scroll {
  overflow: auto;
  white-space: nowrap;
}

一旦div内的宽度超过屏幕宽度或div宽度（您可以定义），它将应用水平滚动条。

带水平滚动条的Bootstrap面板

2 个答案: