避免在Bootstrap的span div中自动设置边距

Question

我正在使用Bootstrap的流式布局。我期望的布局如下：

我的HTML代码

<div class="container">
    <div class="row-fluid">
        <div class="span4 well">span4</div>
        <div id="h" class="span8 well ">span8</div>
     </div>
     <div id='calendar' ></div>
</div>

它在桌面上为一行提供span4和span8列。在小设备上，它将span4放在顶部，并在下方显示span8。但是，当屏幕大小调整时，我希望将span8放在顶部，span4放在下方。 我尝试的解决方案

<div class="container">
    <div class="row-fluid">
        <div id="h" class="span8 well pull-right">span8</div>
        <div class="span4 well ">span4</div>
    </div>
    <div id='calendar' ></div>
</div>

它可以工作，但对于大屏幕，它会产生以下布局。 span4 最初留下一些边距，我想避免这种情况。

我该怎么做？

- user2314342

---

这个目前还没有用，但是当Bootstrap 3发布时，它将有 .push* 和 .pull* 类来改变列的顺序。从链接中可以看到：添加 .push* 和 .pull* 修改器类以轻松更改列源顺序。 - Bojangles

@Bojangles，我试图在http://acmetech.github.io/todc-bootstrap-3/assets/css/todc-bootstrap.css中找到用于简单列源排序的.push*和.pull*修饰符类。但是，我没有找到。我应该在哪里找到它？ - user2314342

它将在发布时采用Bootstrap 3。目前在2.x系列中不可用。 - Bojangles

Answer 1

尝试添加这个样式：

。

#x{
    margin-left: 0px;
}

更新您的HTML为：

<div class="container">
    <div class="row-fluid">
        <div id="h" class="span8 well pull-right">span8</div>
        <div id="x" class="span4 well">span4</div>
    </div>
    <div id='calendar' ></div>
</div>

这个id只是覆盖了 Bootstrap css 的这一部分内容：

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

- bridgepickup