Question

我对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上看到了一些关于行液的例子，但是我已经完成了 - 出于好的理由我已经读过了。

希望这已经足够了解 - 让我知道是否需要澄清。

Answer 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>

基本上我的麻烦是一直在创建新的行，当我需要做的是继续将它们彼此相邻时，然后当它们到达“侧边栏”时，我添加一个“推”以将其包装到下一个“行”将开始。

很高兴得到一个更好的方法，但它现在有效。

Answer 2

我在评论帖中回答了这个问题，基本上我采用了不同的方法

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>

我会尝试这样做，因为你在包装容器上做了一次推送/拉动太多了，因为你有一个非常简单的布局。

检查一下，如果这样或者你有问题，请在这里或我的评论主题告诉我。

Answer 3

我和你有完全相同的问题。我想出了一个解决方案，可以使用纯CSS（已编译的SCSS，即硬编码）或javascript实现 - 我将它们放在下面。

想法如下：你有一个div的百分比宽度就容器而言，想要知道div B的百分比，它是A的后代。你可以做一个简单的计算来弄清楚如果我没有弄错的话，以容器的形式表示div B的百分比 - B / A * 100。计算本身在CSS版本的注释中（链接到gist如下）。

请注意，为了实现这一点，从A下降并包含B的div不应该修改宽度（很像bootstrap本身）。

基于CSS的解决方案（确切地说是SCSS），只接受两级网格： https://gist.github.com/royalsflush/8403942
在这里，我只是循环了父母和孩子的可能性（因此限制了两个层次）。

一个JS解决方案，它使用我为第一个解决方案进行的计算和树遍历来调整网格的所有嵌套组件。演示：http://bootply.com/105852
和来源：https://gist.github.com/royalsflush/8422780
为此，我使用与CSS解决方案相同的想法，除了我在其上使用递归。让我举一个例子来澄清：假设你再次得到A和B，并且还有一个从C开始的div C.如果你执行我上面针对B所述的计算，那么就容器和C in而言，你将得到B. B的条款，与A和B的情况完全相同。希望清楚，不是我最好的解释。

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

Bootstrap 3嵌套网格未重置为12

3 个答案: