我在引导模式中有2 div由col-8和col-4分隔。在这里如何才能为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">×</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添加。有什么建议吗？
答案 0 :(得分：4)
使用overflow-y元素在.addScroll div set height中添加.col-sm-4 div
.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">×</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>
答案 1 :(得分：3)
您可以使用以下CSS规则：
.addScroll {
overflow-y: auto;
max-height: 140px;
}
如果您不指定height或max-height .addScroll元素（或其中一个父元素不会限制其高度），则它将占用内容的高度，滚动将不会应用。但是，如果您要指定例如max-height: 140px;（与其他div相同的高度），则会应用滚动。
这是工作小提琴：https://jsfiddle.net/et5b274h/1/
答案 2 :(得分：3)
请检查https://jsfiddle.net/et5b274h/8/，看看这是否是你想要的。我在modal-content中添加了 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">×</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>
答案 3 :(得分：2)
您可以将CSS overflow-y: scroll;height: 120px用于内部div（col-md-4）。
如果您使用auto代替scroll，则会在必要时添加滚动条。
<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">×</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>