如何在引导模式中只为选定的div添加垂直滚动？

Question

我在引导模式中有2 div，由col-8和col-4.Here分隔，如何只为col-4 div添加垂直滚动？

​

/* .addScroll{
  overflow-y:auto;
} */
/* .modal-body{
 overflow-y:auto;
} */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="col-xs- 8 col-sm-8  col-md-8 col-lg-8">In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.</div>
                    <div class="col-xs- 4 col-sm-4  col-md-4 col-lg-4 addScroll">In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

​

我可以为完整的vertical-scroll添加modal-body。但我只想为col-4 div添加。有什么建议吗？

https://jsfiddle.net/et5b274h/

Answer 1

在.addScroll div设置高度中添加.col-sm-4 div，其中包含溢出-y元素。

​

.addScroll{
  overflow-y:auto;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs- 8 col-sm-8  col-md-8 col-lg-8">In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.</div>
                        <div class="col-xs- 4 col-sm-4  col-md-4 col-lg-4">
                            <div class=" addScroll">
                                In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

​

Answer 2

您可以使用以下CSS规则：

.addScroll {
  overflow-y: auto;
  max-height: 140px;
}

如果您不指定height或max-height of .addScroll元素(或者父元素之一不会限制其高度)，它将占用与内容相同的高度，并且滚动卷将不会被应用。但是，如果要指定max-height: 140px; (与其他div相同的高度)，则将应用滚动。

下面是工作小提琴：https://jsfiddle.net/et5b274h/1/

Answer 3

请检查https://jsfiddle.net/et5b274h/8/，看看这是否是你想要的。我在模态内容中添加了一个带有类行的div。

<div class="container">

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-8 col-ld-8 col-xs-8">
                  11one one one one one one one one

                </div>
                <div class="col-md-4 col-ld-4 col-xs-4">
                  <div style="width: 100%; height: 100px; overflow-y: scroll; overflow-x: hidden">
                    22two
                    <br/> two
                    <br/> two
                    <br/> two
                    <br/> two
                    <br/> two
                    <br/> two two two
                  </div>
                  <div>

                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>

    </div>