使 Bootstrap 行的一列可滚动

Question

使 Bootstrap 行的一列可滚动

我一直试图弄清楚如何/在哪里放置溢出：滚动样式到引导 div 元素，但没有运气。我的应用程序是 angularjs 与本地 MySQL 服务器交谈......所以不容易把它放在 jsfiddle 上......我会尝试附上一张图片和一些代码，希望有人能引导我朝着正确的方向前进。

我的目标是在左侧有一个主歌曲列表，现在大约有 100 首歌曲。然后我在右边有三个设置列表，我将歌曲拖入其中以构建设置。使用 JQuery 可排序的东西，这一切都可以正常工作。我现在的问题是主歌曲列表需要向下滚动才能找到所有歌曲，而设置列表仍保留在屏幕上。

在附加的图像中，Bootstrap 容器用蓝色勾勒出来，行用红色虚线，列用绿色虚线，最后 #masterList 和 #setxx DIV 用实心红色。

看起来我在元素的右侧 DIV 内有滚动条......但页面似乎呈现整个列表，因此滚动发生在浏览器级别......而不是在 DIV 内。

任何帮助将不胜感激。

急诊室

    <div class="container">
      <div class="row">
        <div class="col-md-3">  <!-- Master song list DIV !-->     
            <div ng-controller="getMasterSongListController">
            <b>Song Master List</b>
              <div id="masterList" style="overflow: scroll;">
                  <div id="songID_{{song.ID}}" ng-repeat="song in songs | orderBy:'ID'" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

        <div class="col-md-3">  <!-- Set one DIV !-->
          <div ng-controller="getSongsSetOneController">
            <b>SET 01</b>
              <div id="setOne">
                  <div id="songID_{{song.ID}}" ng-repeat="song in setOneSongs" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

        <div class="col-md-3">  <!-- Set two DIV !-->
          <div ng-controller="getSongsSetTwoController">
            <b>SET 02</b>
              <div id="setTwo">
                  <div id="songID_{{song.ID}}" ng-repeat="song in setTwoSongs" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

        <div class="col-md-3">  <!-- Set three DIV !-->
          <div ng-controller="getSongsSetThreeController">
            <b>SET 03</b>
              <div id="setThree">
                  <div id="songID_{{song.ID}}" ng-repeat="song in setThreeSongs" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

      </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

Set List Maker 应用程序的屏幕截图

Answer 1

Kud*_*dos 5

我猜你想要这样的东西？

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container-fluid {
    margin: 0;
    padding: 0;
}
.left,
.right {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll; 
  text-align: center;
}

.left {
  background-color: #eee;
}
.right {
  background-color: khaki;
}

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
  <div class="col-xs-3 left">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
  <div class="right">
    <div class="col-xs-3">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div class="col-xs-3">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div class="col-xs-3">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	5582 次
最近记录：	9 年，8 月前