css - 为什么我的侧边栏和内容之间有这么大的空间？

Question

我已经将我的布局简化为这个小提琴或全屏版本

我有两个问题。首先，侧边栏和内容之间的空间非常大。我希望它们正常间隔。在我的情况下，我希望侧栏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

您需要尝试使用 Bootstrapsoffset类。我在这里给你做了一个简单的例子：

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/