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

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

您需要尝试使用Bootstraps 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/