Twitter Bootstrap 嵌套网格下拉列 [英] Twitter Bootstrap Nested Grid Drop Column

问题描述

这是否可以在 Twitter Bootstrap 中使用相同的标记通过操作行/列类来完成?我已经针对不同的尺寸使用单独的标记对其进行了布局.理想情况下，我想要一个标记并让它在较小的屏幕上适当地折叠起来.

大图

<前>----------------- ------------------------------------------|||||||二 ||一 |------------------------------------------|||||||三 |----------------- ------------------------------------------

 
<div class="col-lg-4">一个</div><div class="col-lg-8"><div class="row"><div class="col-lg-12">两个</div><div class="col-lg-12">三</div>

中/小视图

<前>----------------- ------------------------------------------|||||一 ||二 |||||----------------- ------------------------------------------------------------------------------------------------------|||三 |||------------------------------------------------------------

 
<div class="col-md-4 col-sm-4">一个</div><div class="col-md-8 col-sm-8">两个</div>
<div class="row"><div class="col-md-12 col-sm-12">三</div>

对于 xs 视图，我会将它们全部堆叠在一起.

解决方案

静态高度 div 演示

这是使用纯Bootstrap 实现的.这里使用的 css 只是为了演示(@media 除外).
HTML:

<div class="col-md-4 col-sm-4 a"></div><div class="col-md-8 col-sm-8 b"></div><div class="col-md-8 col-sm-12 c"></div>

演示 CSS:

.a{ height:200px;background:red;}@media (max-width:992px){ .a{ height:100px;} }.b,.c{ 高度:100px;}.b{ 背景:绿色；}.c{ 背景:紫色；}

<小时>

动态高度 div 的演示

使用jQuery

$(window).resize(function(){if (window.matchMedia('(min-width: 768px)').matches) {var a = $("#a").height();$("#b").height(a+'px');}if ((window.matchMedia('(min-width: 992px)').matches) || (window.matchMedia('(max-width: 768px)').matches) ) {$("#b").css('height','auto');}});

Can this be done in Twitter Bootstrap using the same markup by just manipulating the row/column classes? I have laid it out with separate markup for the different sizes. Ideally I'd like one markup and have it collapse appropriately for the smaller screens.

Large View

----------------- ------------------------------------------
|               | |                                        |
|               | |               Two                      |
|     One       | ------------------------------------------
|               | |                                        |
|               | |               Three                    |
----------------- ------------------------------------------

    <div class="row">
        <div class="col-lg-4">One</div>
        <div class="col-lg-8">
            <div class="row">
                <div class="col-lg-12">Two</div>
                <div class="col-lg-12">Three</div>
            </div>
        </div>
    </div>

Medium/Small Views

----------------- ------------------------------------------
|               | |                                        |
|     One       | |               Two                      |
|               | |                                        |
----------------- ------------------------------------------
------------------------------------------------------------
|                                                          |
|                     Three                                |
|                                                          |
------------------------------------------------------------

    <div class="row">
        <div class="col-md-4 col-sm-4">One</div>
        <div class="col-md-8 col-sm-8">Two</div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12">Three</div>
    </div>

For xs view, I will just stack them all on top of each other.

解决方案

Demo for static height divs

This is achieved using pure Bootstrap. The css used here is just for the sake of demo(except the @media ).
HTML:

<div class="col-md-4 col-sm-4 a"></div>
<div class="col-md-8 col-sm-8 b"></div>
<div class="col-md-8 col-sm-12 c"></div>

Demo CSS:

.a{ height:200px;background:red; }
@media (max-width:992px){ .a{ height:100px; } }
.b,.c{ height:100px; }
.b{ background:green; }
.c{ background:purple; }

---

Demo for dynamic height divs

Used jQuery

$(window).resize(function(){

    if (window.matchMedia('(min-width: 768px)').matches) {
        var a = $("#a").height();
        $("#b").height(a+'px');
     }
    if ((window.matchMedia('(min-width: 992px)').matches) || (window.matchMedia('(max-width: 768px)').matches) ) {
        $("#b").css('height','auto');
    }

});

这篇关于Twitter Bootstrap 嵌套网格下拉列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！