我正在学习引导程序。我有一个奇怪的情况,标签内容被推离标签。
页面布局很简单。一个菜单向左浮动,主要内容有一个左边距来保存菜单。
在主要内容区域,我有一个 Bootstrap 选项卡组件。
但是,选项卡的内容区域被垂直向下推。这是代码:
<div style="width: 100px; float:left;height:300px;background-color:red;">
left
</div>
<div style="margin-left: 120px; background-color: pink">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</div>
请参阅http://jsfiddle.net/dDNBS/7/
我不知道为什么。如何解决?