首页 文章

带水平滚动条的Bootstrap面板

提问于
浏览 次
1

圆了一圈又一圈 . 我有一个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，但没有任何乐趣 . 请帮忙 ：）

html css twitter-bootstrap-3

2 回答

  • 0

    Update your CSS like below

    您可以根据要滚动的子容器数定义 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>

    UPDATE - 动态添加.resultContainer的宽度

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

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

    <div class="scroll">

</div>

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

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

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

    回复于

相关问题