4

我对 Bootstrap 3 有点陌生，所以如果这看起来很明显，请原谅我。

我创建了一个 jsfiddle 来开始做这件事，希望能帮助理解我要问的问题：http: //jsfiddle.net/dwdhj/2/

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            8
            <div class="row">
                <div class="col-sm-4">
                    4 - but want to appear as 6
                </div>
                <div class="col-sm-4">
                    4 - but want to appear as 6
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            4 - full height of screen
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</div>

当设计师使用网格时——比如说来自http://gridpak.com/——他们会在整个设计中坚持使用网格。如果他们要创建一个右侧面板作为屏幕的全高，它可能会占用 4 个网格。这给我们留下了 8 - 我知道的好数学。

我的问题：如果我在最初的 8 行中创建一个新行 - 这样我就可以使该容器中的所有内容都变得漂亮和流畅 - 它实际上是在创建另一个 12 列网格。这个新的 12 列网格实际上与设计师最初使用的网格不匹配。

我的问题：我可以让它在我使用的最初的 8 列 div 中保持相同的网格 - 所以我最多只能使用 8 列，或者我应该在这里做些什么？也许这是设计师需要做的事情？

我确实在 Bootstrap 2 上看到了一些使用 row-fluid 的例子，但是这已经被取消了——从我读到的内容中有很好的理由。

希望这已经足够有意义 - 让我知道是否需要澄清。

4

3 回答 3

1

我在我的评论线程上回答了这个问题，基本上我采取了不同的方法

http://jsfiddle.net/Yjn9V/1/

<div class="container">
    <div class="row">
        <div class="col-sm-12">Header</div>
    </div>
    <div class="row">
    <div class="col-sm-4 col-sm-push-8">4 full height
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>

        <div class="col-sm-8 col-sm-pull-4">
            <div class="row">
                <div class="col-sm-12">12</div>
            </div>
            <div class="row">
                <div class="col-sm-6">6</div>
                <div class="col-sm-6">6</div>
            </div>
            <div class="row">
                <div class="col-sm-6">6</div>
                <div class="col-sm-6">6</div>
            </div>
            <div class="row">
                <div class="col-sm-5">5</div>
                <div class="col-sm-2">2</div>
                <div class="col-sm-5">3</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">footer</div>
    </div>
</div>

我会尝试这个，因为您在包装容器上做的事情太多推/拉，因为您有一个非常简单的布局。

看看，让我知道在这里或回到我的评论线程，如果这有效，或者如果你有问题。

于 2013-10-07T16:59:37.557 回答
1

在做了更多的研究之后，我发现使用推/拉的组合我能够得到我想要的结果。

查看更新的 jsfiddle 链接http://jsfiddle.net/dwdhj/3/

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            Header
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">
            4 - full height of screen
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
        <div class="col-sm-8 col-sm-pull-4">
            8
        </div>
        <div class="col-sm-4 col-sm-pull-4">
             4 
        </div>
        <div class="col-sm-4 col-sm-pull-4">
             4 
         </div>
        <div class="col-sm-4 col-sm-pull-4">
             4
        </div>
        <div class="col-sm-4 col-sm-pull-4">
             4 
         </div>     
         <div class="col-sm-3 col-sm-pull-4">
             3
        </div>
        <div class="col-sm-2 col-sm-pull-4">
             2 
         </div>
        <div class="col-sm-3 col-sm-pull-4">
             3
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            Footer
        </div>
    </div>
</div>

本质上，我的麻烦是一直创建新行，而我需要做的是不断将它们彼此相邻添加，然后当它们到达“侧边栏”时，我添加了一个“推入”以将其包裹到下一个“行”的位置“会开始的。

很高兴被告知这样做的更好方法，但它现在有效。

于 2013-10-07T09:19:05.633 回答
0

我和你有完全相同的问题。我想出了一个解决方案，它要么用纯 CSS（即编译的 SCSS）、硬编码或 javascript 实现——我把它们都放在下面。

的想法如下：你有一个 div A 相对于容器的百分比宽度，并且想知道 div B 的百分比，它是 A 的后代。你可以做一个简单的计算来计算百分比如果我没记错的话，就容器而言，div B - B/A*100。计算本身在 CSS 版本的注释中（要点链接如下）。

请注意，为此，从 A 下降并包含 B 的 div 不应修改宽度（很像引导程序本身）。

基于 CSS（确切地说是 SCSS）的解决方案，只接受两级网格： https
://gist.github.com/royalsflush/8403942在这里我只是遍历父子节点的可能性（因此限制了两个水平）。

还有一个 JS 解决方案，它使用我为第一个解决方案所做的计算和树遍历来调整网格的所有嵌套组件。演示：http
://bootply.com/105852 和来源：https
://gist.github.com/royalsflush/8422780 为此，我使用了与 CSS 解决方案相同的想法，只是我使用了递归。让我举个例子来澄清一下：假设你又有 A 和 B，还有一个从 B 派生的 div C。如果你执行我上面对 B 所说的计算，你将有容器方面的 B 和容器中的 C B 的条款，这与我们与 A 和 B 的情况完全相同。希望这很清楚，不是我最好的解释。

两者都有演示和大量评论，但如果您需要进一步说明，请告诉我。希望能帮助到你！

于 2014-01-14T18:14:58.783 回答