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

Question

I have 2 div in bootstrap modal separated by col-8 and col-4 .Here how can I add vertical scroll only for 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> 

I can add vertical-scroll for complete modal-body . But I want to add only for col-4 div. Any suggestion?

https://jsfiddle.net/et5b274h/

Answer 1

Add .addScroll div inside .col-sm-4 div set height of it with overflow-y element

 .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

You can use the following CSS rules:

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

If you will not specify height or max-height of .addScroll element (or one of the parent elements will not limit its height), it will take as much height as content, and the scroll will not be applied. But if you will specify for example max-height: 140px; (the same height as the other div ), the scroll will be applied.

Here is the working fiddle: https://jsfiddle.net/et5b274h/1/

Answer 3

Please check https://jsfiddle.net/et5b274h/8/ and see if this is what you want. I have added a div with class row inside modal-content.

<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>

Answer 4

You can use CSS overflow-y: scroll;height: 120px to your inner div ( col-md-4 ).

If you use auto instead of scroll it will add scroll whenever necessary.

 <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="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 style="overflow-y: scroll;height: 120px;" class="col-xs- 4 col-sm-4 col-md-4 col-lg-4 vertical-scroll addScroll">In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and shar CERN researchers to use and shar CERN researchers to use and shar CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing adsfdsfdsfdsfdsfsdfds edsfsdfn 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>