如何在响应式设计中创建与父列具有相同宽度的导航栏的容器？单击第一个 div 中的链接时，内容 div 将滚动到正确的高度，以便内容隐藏在后面hr并链接 div。所有这些都集中在一个专栏中。
我已经创建了起始模板jsfiddle
我想要的效果：
当前错误的 HTML：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search" />
</form>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span9">
<div class="hidebehind">
<div class="push">
<div class="row">
<div class="well links">
<div class="span3">
<ul>
<li><a href="#scroll1" rel="" id="scroll2" class="scroll">scroll to 1</a>
</li>
<li><a href="#scroll2" rel="" id="scroll2" class="scroll">scroll to 2</a>
</li>
<li><a href="#scroll3" rel="" id="scroll3" class="scroll">scroll to 3</a>
</li>
<li><a href="#scroll4" rel="" id="scroll4" class="scroll">scroll to 4</a>
</li>
</ul>
</div>
<div class="span3">
<ul>
<li><a href="#scroll5" rel="" id="scroll5" class="scroll">scroll to 5</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr />
</div>
<hr />
<div class="row scrollable">
<div class="well">
<ul>
<li><a name="scroll1" id="scroll1to"><strong>1. Some text</strong></a>
</li>
<li><a name="scroll2" id="scroll2to"><strong>2. Some text</strong></a>
</li>
<li><a name="scroll3" id="scroll3to"><strong>3. Some text</strong></a>
</li>
<li><a name="scroll4" id="scroll4to"><strong>4. Some text</strong></a>
</li>
<li><a name="scroll5" id="scroll5to"><strong>5. Some text</strong></a>
</li></ul>
</div>
</div>
</div>
<div class="span3">
<div class="well">relative</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="well">footer</div>
</div>
当前糟糕的 CSS：
.links {
width:58%;
position:fixed;
}
.hidebehind {
position: fixed;
width:58%;
}
.scrollable {
margin-top:170px;
overflow:auto;
}