我有一个看起来有点像以下plunkr的网页： https://plnkr.co/edit/UyM3DDrH9Y5P8jGTfLp4?p=preview
简而言之：我有一个标题和一个副标题。 在其中一个页面上，我有一个列表（以列方式），我可以在任何项目上选择。选择后，右侧的表格应填写正确的信息，以便我可以更改。
现在我的问题与定位有关。由于列表比页面更进一步，因此页面滚动。
我想要的是表单将与它一起向下滚动。因此，用户在选择任何项目后无需上传页面。 有没有办法根据它的上部div修复它（没有JQuery）？我不想根据页面修复它，因为它不能修复页面顶部的高度。
我不知道我的问题是否清楚。
所以我的代码（简而言之）看起来有点像这样：
<div class="navbar navbar-default">
// Here will be navbar items
</div>
<div class="container-fluid">
<div class="col-md-3 col-sm-4">
// Here the list will be (list-group)
</div>
<div class="col-md-9 col-sm-8">
<form>
//This form represents edit fields for the items in the list
// I want this form to be on top of page while scrolling down the list.
</form>
</div>
</div>
亲切的问候
答案 0 :(得分：0)
我不确定我是否理解你的问题。但如果我有，我认为这是你寻求的解决方案:(它需要一些额外的造型）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<style>
#formright {
position:fixed;
top:1;
right:0;
width:600px;
}
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<ul class="nav nav-tabs navmargin">
<li class="subnav active" ><a>Zenders</a></li>
<li class="subnav"><a>Bronnen</a></li>
<li class="subnav"><a>Programma's</a></li>
<li class="subnav"><a>Gebruikers</a></li>
</ul>
<admin-channels _nghost-c4="">
<div _ngcontent-c4="" class="col-md-3 col-sm-4">
<div _ngcontent-c4="" class="list-group">
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
<button _ngcontent-c4="" class="list-group-item" data-id="1">VTM</button>
</div>
</div>
<div id="formright">
<div class="col-md-9 col-sm-8">
<form novalidate="" class="ng-untouched ng-pristine ng-valid">
<div class="form-group">
<label class="control-label col-md-3" for="name">Naam</label>
<div class="col-md-9">
<input class="form-control ng-untouched ng-pristine ng-valid" id="name" name="name" placeholder="Vul naam in..." required="" type="text" ng-reflect-required="" ng-reflect-name="name" ng-reflect-model="VIER">
</div>
</div>
<div _ngcontent-c4="" class="form-group">
<label _ngcontent-c4="" class="control-label col-md-3" for="papercuts">Gebruiken</label>
<div _ngcontent-c4="" class="col-md-9">
<input _ngcontent-c4="" class="form-control ng-untouched ng-pristine ng-valid" id="showChannel" name="showChannel" type="checkbox" ng-reflect-name="showChannel" ng-reflect-model="true">
</div>
</div>
<div _ngcontent-c4="" class="form-group">
<div _ngcontent-c4="" class="col-md-offset-3 col-md-9">
<button _ngcontent-c4="" class="btn btn-success" style="width:100%" type="submit">Opslaan</button>
<button _ngcontent-c4="" canceltext="Nee" class="btn btn-danger" confirmtext="Ja" message="Bent u zeker?" mwlconfirmationpopover="" placement="top" style="width: 100%" title="Verwijderen zender" type="button" ng-reflect-title="Verwijderen zender" ng-reflect-message="Bent u zeker?" ng-reflect-confirm-text="Ja" ng-reflect-cancel-text="Nee" ng-reflect-placement="top">Verwijderen</button>
</div>
</div>
</form>
</div>
</div>
</admin-channels>
</div>
<!-- /container -->
</body>
</html>