这是我为网站设计的第一个主题。但当我滚动该页面时，我无法设置双侧div。我受够了。
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#" style="margin-right: 150px"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top:60px">
<div class="row">
<!--right-->
<div class="col-sm-3 well text-center">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="avatar3.png" class="img-circle" height="65" width="65" alt="Avatar"><br>
<button type="button" class="btn btn-default" style="margin-top: 10px">Default</button>
<button type="button" class="btn btn-primary" style="margin-top: 10px">Primary</button>
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
</div>
<div class="col-sm-7 " >
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<form>
<div class="panel-body">
<label for="comment">Status:</label>
<tr>
<textarea class="form-control" rows="2" id="comment"></textarea>
</tr>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px"><span class="glyphicon glyphicon-pencil"></span>Post</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 rounded">
<div class="well">
<img src="avatar2.png" class="img-circle" height="65" width="65" alt="Avatar">
<p class="text-left" style="margin-top: 5px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">thumb_up</i> <b>Like</b>
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">chat_bubble_outline</i> <b>Comment</b>
</button>
</div>
</div>
</div>
</div>
<!--left-->
<div class="col-sm-2 well text-center">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
</div>
</div>
</div>
我想当我滚动页面时，两侧固定位置只有中间一列向下滚动我正在使用引导程序。我无法做到这一点。请帮帮我。我正在制作一个简单的社交网站模板responsive.when我试图定义一类css来固定两个div的位置，但没有成功。
如果只想滚动中间的容器，可以编写一点css：overflow-y: scroll
编辑：添加了rncrtr的建议。如果您想固定边栏，也可以在CSS中应用position: fixed;。
.scrollable {
overflow-y: scroll;
max-height: 400px;
}
.fixed {
position: fixed;
}<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#" style="margin-right: 150px"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top:60px">
<div class="row">
<!--right-->
<div class="col-sm-3 well text-center fixed">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="avatar3.png" class="img-circle" height="65" width="65" alt="Avatar"><br>
<button type="button" class="btn btn-default" style="margin-top: 10px">Default</button>
<button type="button" class="btn btn-primary" style="margin-top: 10px">Primary</button>
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
</div>
<div class="col-sm-7 scrollable">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<form>
<div class="panel-body">
<label for="comment">Status:</label>
<tr>
<textarea class="form-control" rows="2" id="comment"></textarea>
</tr>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px"><span class="glyphicon glyphicon-pencil"></span>Post</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 rounded">
<div class="well">
<img src="avatar2.png" class="img-circle" height="65" width="65" alt="Avatar">
<p class="text-left" style="margin-top: 5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at viverra diam, eget volutpat purus. Vestibulum scelerisque lobortis velit in dictum. Curabitur accumsan eget turpis molestie commodo. Duis mattis odio quis gravida ullamcorper. Praesent
non quam cursus, malesuada mi quis, commodo sem. Aenean scelerisque est a vestibulum consectetur. Vivamus venenatis vehicula porttitor. Suspendisse potenti. Nunc tempor quam et orci vehicula pretium. In quis tortor eleifend velit eleifend
faucibus. Ut egestas, mi sit amet semper lobortis, mi nunc pulvinar leo, lacinia consequat urna lacus commodo est. Nulla congue posuere varius. Praesent commodo, risus at scelerisque tristique, arcu magna eleifend metus, id gravida dui
est tincidunt turpis. Nam hendrerit nec nunc lacinia efficitur. Pellentesque vitae tellus vulputate, sollicitudin quam vitae, semper ante. Sed et lacus sed arcu aliquet porttitor in eu dui. Sed posuere lorem et varius dapibus. Phasellus
varius sed massa volutpat tempus. Suspendisse dignissim euismod risus ac efficitur. Duis euismod mauris ac massa fermentum, vel aliquet tortor sodales. Donec porttitor sodales nisl. Suspendisse maximus viverra massa non sagittis. Duis
mattis lectus eget nunc euismod, eu ornare nunc vestibulum. Ut at pharetra turpis. Donec risus turpis, lacinia sit amet purus ut, lobortis ultrices nulla. Nunc fermentum urna non elit mattis, ut pharetra dui commodo. Fusce cursus mauris
porttitor dui varius luctus. Quisque nec vestibulum velit. Nullam orci mi, congue sit amet odio a, interdum commodo nibh. Donec nec sem sodales, ornare ligula in, placerat magna. Praesent enim nulla, hendrerit sagittis lorem ut, cursus
interdum nibh. Integer in metus justo. Mauris vitae turpis et lacus condimentum mollis quis luctus augue. Quisque fermentum augue ac purus dignissim, in luctus mauris vulputate. Phasellus id tempor purus. Donec at augue leo. Integer lectus
massa, aliquet in bibendum vel, tincidunt sed eros. Mauris ultrices ipsum non enim fermentum finibus. Nulla porttitor faucibus tempus. Curabitur dignissim sed felis nec convallis. Aliquam gravida risus fringilla nibh efficitur tempus in
sit amet ex. Vivamus id tempor neque, at euismod lorem. Sed dui justo, interdum eu augue et, molestie convallis mauris. Sed scelerisque blandit pretium. Vivamus posuere ex posuere lacus consectetur porttitor. Maecenas pulvinar arcu vel
ante ornare fringilla. Praesent maximus fringilla rhoncus. Sed ac ultrices velit.
</p>
<button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">thumb_up</i> <b>Like</b>
</button>
<button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
<i class="material-icons">chat_bubble_outline</i> <b>Comment</b>
</button>
</div>
</div>
</div>
</div>
<!--left-->
<div class="col-sm-2 well text-center fixed">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
</div>
</div>
</div>