html – Bootstrap 3嵌套网格未重置为12

2023年10月6日 219次阅读

我对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上看到了一些关于行液的例子但是已经废除了 – 出于好的理由我已经阅读过了.

希望这已经足够了 – 让我知道是否需要澄清.

最佳答案 在做了一些更多的研究后,我发现使用推/拉的组合我能够得到我追求的结果.

查看更新的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>

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

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

点赞