Question

我正在尝试在bootstrap网格系统中创建一个可滚动的div。但它不起作用。没有bootstrap我能够得到滚动条。这是我的小提琴。在bootstrap中，我没有获得滚动条但在引导网格之外我得到滚动条。我试图实现滚动条而不固定外部div的高度。我不能使用max-height，因为它在一定高度后不会增加。

http://jsfiddle.net/gurukashyap/k4rwo80z/8/

    <div class="container">
  <div class="row">
      <div class="col-sm-9">
          <div id="container">

    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>
</div>
</div>



      </div>
      <div >

      </div>
    </div>
</div>    
            <br/><br/>
Without bootstrap Grid scroll works!!

             <div id="container">

    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>

Answer 1

更新

jsFiddle在此更新中，我添加了一点.video-item-wrapper { position: relative; } .play-item-wrapper { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }我将屏幕高度指定给jQuery，这样您也可以获得与#content相同的效果。< / p>

Your sample I edited

可能对您有帮助的其他信息：

在此行中：height=100%您可以根据引导程序的网格系统更改<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">的{{1}}。该div有4个类。

width当div屏幕大于col-lg-12时，系统会识别此类。您可以相应地更改号码。 width将是网格系统的完整大小，1200px将是网格系统完整大小的一半，12是网格系统全尺寸的3/4

6

4

col-sm-12会被识别。同样的规则适用于数字。

width

768px

col-md-12。数字的规则相同。
width si识别屏幕992px是否小于col-xs-12移动设备。此处的所有网格编号等同于网格系统的完整大小。例如，如果您使用width，则宽度将与使用768px时的宽度相同100％，对于2,3,4等也是100％相同。

引导程序中的滚动条

1 个答案: