twitter-bootstrap - 在行流体中 Bootstrap 多行跨度

标签 twitter-bootstrap fluid-layout grid-layout

This question非常相似,尽管它没有回答我的问题。

An answer like this会很好,只要它适用于响应式布局,例如.row-fluid,目前还没有。

在 Bootstrap 中是否有可能像这样在该行中有一个流动的行和多个行:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
        </div>
        <div class="span12">
        </div>
        <div class="span12">
        </div>
    </div>
</div>

第二行 span 没有奇数左边距?

Click here for a JSFiddle example

本质上,我需要的是在 .row-fluid 中有多行跨度,在第一次破坏布局后没有行。

最佳答案

嗯,位移是由 margin-left 引起的。

这并不理想,但您始终可以覆盖 CSS:

.container-fluid .row-fluid [class*="span"] {
    margin-left:0px;
}

但实际上,错误似乎在于您声明了 12 个 span3 DIV,总共 36 个。12 是流体容器的限制,因此您需要制作这些 span1 :

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1">1
        </div>
        <div class="span1">2
        </div>
        <div class="span1">3
        </div>
        <div class="span1">4
        </div>
        <div class="span1">5
        </div>
        <div class="span1">6
        </div>
        <div class="span1">7
        </div>
        <div class="span1">8
        </div>
        <div class="span1">9
        </div>
        <div class="span1">10
        </div>
        <div class="span1">11
        </div>
        <div class="span1">12
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            1
        </div>
        <div class="span3">
            2
        </div>
        <div class="span3">
            3
        </div>
        <div class="span3">
            4
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            1
        </div>
        <div class="span3">
            2
        </div>
        <div class="span3">
            3
        </div>
        <div class="span3">
            4
        </div>
    </div>
</div>

看这里:

http://jsfiddle.net/7Lu43/51/

关于twitter-bootstrap - 在行流体中 Bootstrap 多行跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16103438/

相关文章:

html - 100% 高度和流体布局?

html - img-fluid 无法正确调整图像高度

javascript - 如何触发布局改变?

twitter-bootstrap - 可扩展的布局过渡

css - data-toggle ="collapse"单击菜单时菜单消失

css - 使用主题使 Bootstrap 3 导航栏透明

html - 平板电脑的全高页面,无垂直滚动且适合一个屏幕的内容

css - 流体布局中的固定边距

twitter-bootstrap - 如何在 Bootstrap 中将定价表居中?

html - css-grid 2x2 或 2x3 布局,取决于元素的数量