为什么我的边栏和我的内容之间有更多空间？

Question

我把我的布局煮到这fiddle或full screen版本

我有两个问题。首先，侧栏和内容之间的空间非常大。我希望他们能像平常一样分开。在我的情况下，我期望侧栏大小为span2，我的主要内容是span7的大小，然后右栏是span3。

<div class="row-fluid"> 
    <div class="span2"> 
     <div class="well sidebar-nav-fixed"> 
     <ul class="nav nav-list"> 
      <li class="nav-header">Sidebar</li> 
      ...other links ... 
     </ul> 
     </div> 
    </div> 
    <div class="span7 span-fixed-sidebar"> 
     <div id="world-map" style="display:block;">&nbsp;</div> 
    </div> 
    <div class="span3"> 
     <div class="row-fluid"> 
      <div class="span12" id="country-info"> 
       <h2 id="country-info-header"> 
        The Detail Header 
       </h2> 
       <p id="country-info-summary"> 
        A set of summary information. A short paragraph of text. 
       </p> 
      </div> 
     </div> 
    </div> 

但是，我得到的结果与我的侧边栏和我的内容之间的巨大差距（红色框），而右手的内容是在左边，我的侧边栏下。我怎样才能修复这种布局？

Answer 1

您需要白手起家offset类实验。我在这里让你一个简单的例子：

http://jsfiddle.net/tXzjX/5/

你position:fixed需要的元件从页面的自然流动，并以某种方式“重置”对电网的列。使用Bootstrap的offset类可以抵消该问题。点击此处：http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem“偏移列”。

Answer 2

难道你不只是降低毛利的大小，像这样：

.row-fluid > .span-fixed-sidebar { 
    margin-left: 100px; 
} 

为似乎移动红色酒吧很好

编辑：我有一个关于游戏，并拿出一个稍微看起来更简单的代码，我认为这是你需要调整一下的效果。 http://jsfiddle.net/bmgh1985/UeFRa/