twitter-bootstrap - dinamicas - bootstrap table

Columna de caída de cuadrícula anidada de Twitter Bootstrap

Question

¿Se puede hacer esto en Twitter Bootstrap usando el mismo marcado simplemente manipulando las clases de fila / columna? Lo he establecido con marcado separado para los diferentes tamaños. Idealmente, me gustaría un marcado y hacerlo colapsar adecuadamente para las pantallas más pequeñas.

Vista grande

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

Vistas medianas / pequeñas

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

Para la vista xs, simplemente los apilaré uno encima del otro.

Answer 1

Puede hacerlo con algunos de los CSS de Bootstrap (solo para los anchos col-XX y el relleno) y CSS adicional. Es mejor no repetir el contenido ocultándose y mostrando.

Si desea algo .col-sm-4 y .col-md-4 , usar .col-sm-4 es todo lo que se necesita. Es el mismo ancho desde 768px en adelante.

Si quiere algo de ancho completo siempre, en cada tamaño de ventana, no necesita la grilla, por lo que col-xs-12 no es necesario y, por lo general, col-md-12 o algún otro col-X-12 no es necesario requerido si la clase utilizada en la columna está en una consulta de medios superior. Si no hay una clase de columna debajo de la última utilizada, entonces será automáticamente ancho completo debajo de ese min-ancho. Por ejemplo, .col-md-4 bajo 992px será de ancho completo, así que no tengo que retorcer col-sm-12 . Tengo col-sm-4 debajo de 768px de ancho completo y todo desde 768px en adelante será 1/4 de 12, así que no tengo que escribir col-xs-12.

DEMO: https://jsbin.com/huxofe

CSS

custom-grid .content-box {
    padding-top: 15px;
    padding-bottom: 15px;
}

@media (min-width:768px) { 
    .custom-grid .col-sm-4 {
        clear: right
    }

    .custom-grid .box-3 {
        clear: both
    }
}

@media (min-width:1200px) { 
    .custom-grid .col-lg-4 {
        clear: right
    }

    .custom-grid .col-lg-8 {
        float: right
    }

    .custom-grid .box-3 {
        clear: none
    }
}

HTML:

<div class="container">
   <div class="row custom-grid">
      <div class="col-sm-4 col-lg-4 content-box box-1">
         <h3>Content Box 1</h3>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </div>
      <div class="content-box box-2 col-sm-8 col-lg-8">
         <h3>Content Box 2</h3>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </div>
      <div class="content-box box-3 col-lg-8">
         <h3>Content Box 3</h3>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </div>
   </div>
</div>

Answer 2

Demo para divs de altura estática

Esto se logra usando Bootstrap puro. El css utilizado aquí es solo por demostración (excepto @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; }

Demostración para divs de altura dinámicos

JQuery usado

$(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'');
    }

});