レスポンシブデザインで親列と同じ幅のナビゲーションバーにくっつくコンテナを作成するには? 最初の div のリンクがクリックされると、コンテンツ div が右の高さにスクロールされ、コンテンツが背後に隠れてhrdiv にリンクするようになります。これらすべてを 1 つの列にまとめます。
開始テンプレート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;
}