Bootstrap 3嵌套网格不会重置为12 [英] Bootstrap 3 nested grid not reset to 12

问题描述

我已经创建了一个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  - 但想显示为6 
< / div> 
< div class =col-sm-4> 
 4  - 但想显示为6 
< / div> 
< / div> 
< / div> 
< div class =col-sm-4> 
 4  - 全高画面
< 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的例子，但是从我读过的文章中可以看出很好的理由。

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

解决方案

p>在做了一些更多的研究之后，我发现使用push / pull的组合能够获得我之后的结果。

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

 < div class =container> 
< div class =row> 
< div class =col-sm-12> 
标题
< / div> 
< / div> 
< div class =row> 
< div class =col-sm-4 col-sm-push-8> 
 4  - 全高画面
< 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> 
  

本质上，我的麻烦是创建新行所有的时间，当我需要做的是继续添加他们下彼此，然后当他们到达侧栏，我添加一个推，将它包装到下一个行将开始的地方。

快乐建议一个更好的方法这样做，但它现在工作。

I'm somewhat new to Bootstrap 3 so forgive me if this seems far to obvious.

I've created a jsfiddle to start things off with which will hopefully help understand what I'm trying to ask: 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>

When a designer uses a grid - lets say from http://gridpak.com/ - they will stick to that throughout the whole design. If they were to create a right hand panel to be the full height of the screen it would take up perhaps 4 grids. This leaves us with 8 - good math I know.

My issue: If I create a new row inside that initial 8 - so that I can make everything in that container nice and fluid - it is essentially creating another 12 column grid. This new 12 column grid won't actually match up to the grid the designer was originally working from.

My Question: Can I make it so the grid remains the same within the initial 8 column div I used - so I can only use a maximum of 8 columns, or is there something else I should be doing here? Perhaps its something the designer needs to be doing?

I did see some examples of this with row-fluid on Bootstrap 2 but that has been done away with - for good reasons from what I've read.

Hopefully that has made enough sense - let me know if anything needs clarifying.

解决方案

After doing some more research I found that a combination of using push/pull I was able to get the result I was after.

Review the updated jsfiddle link 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>

Essentially my trouble was creating new rows all the time when what I needed to do was keep adding them next to each other and then when they reach the "sidebar" I add a "push" in to wrap it down to where the next "row" would have started.

Happy to be advised on a better way of doing this but it works for now.

这篇关于Bootstrap 3嵌套网格不会重置为12的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！