[SOLUCIONADO] Bootstrap usando clearfix visible-xs

Hyemin · #1 (**permalink**) 24/09/2014, 11:12

Hola como estan?

Estoy aprendiendo Bootstrap 3 de un manual en Inglés que encontre en la web, en uno de los capitulos dice que para evitar que las columnas se solapen entre ellas cuando una es mas larga que las otras hay que usar "clearfix visible-xs"

Para probar la funcionalidad hice 2 archivos identicos con la unica salvedad de que en uno le puse <div class="clearfix visible-xs"></div> y al otro no

Pueden ver online ambos ejemplos en http://adesign.wesped.es/sandbox/b1.html (con clearfix) y http://adesign.wesped.es/sandbox/b1b.html (sin clearfix)

En teoría si entro con el telefono celular en b1b tengo una columna en blanco entre ellas lo cual sucede, pero en b1 deberia estar corregido, el caso es que ambos ficheros se ven exactamente iguales tanto en navegadores normales como en telefonos celulares.

Estoy haciendo algo mal o no entendi la función de clearfix?

Código HTML:

<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                
                <div class="col-xs-6 col-sm-2" style="background-color: #dedef8; box-shadow: 1px -1px 1px #444, 1px -1px 1px #444;">
                    <p>Este es un parrafo de una sola linea, pero tambien tiene una coma</p>                    
                </div>
                
                <div class="col-xs-6 col-sm-2" style="background-color: #dedef8; box-shadow: 1px -1px 1px #444, 1px -1px 1px #444;">
                    <p>Este es un parrafo tiene muchas lineas repetidas,Este es un parrafo tiene muchas lineas repetidas
                    Este es un parrafo tiene muchas lineas repetidas,Este es un parrafo tiene muchas lineas repetidas
                    Este es un parrafo tiene muchas lineas repetidas,Este es un parrafo tiene muchas lineas repetidas
                    Este es un parrafo tiene muchas lineas repetidas,Este es un parrafo tiene muchas lineas repetidas
                    Este es un parrafo tiene muchas lineas repetidas,Este es un parrafo tiene muchas lineas repetidas</p>         
                    
                     <p>Este es un parrafo 2 tiene muchas lineas repetidas,Este es un parrafo tiene muchas lineas repetidas
                    Este es un parrafo tiene muchas lineas repetidas,tiene solo dos renglones.
                    s</p>  
                </div>
                
                <div class="clearfix visible-xs"></div>
                
                 <div class="col-xs-6 col-sm-2" style="background-color: #dedef8; box-shadow: 1px -1px 1px #444, 1px -1px 1px #444;">
                    <p>Este es un parrafo de una sola linea, pero tambien tiene una coma es la 2da vez que lo copio</p>                    
                </div>
                 <div class="col-xs-6 col-sm-2" style="background-color: #dedef8; box-shadow: 1px -1px 1px #444, 1px -1px 1px #444;">
                    <p>Este es un parrafo de una sola linea, pero tambien tiene una coma, tercera vez que se copia</p>                    
                </div>
                
                
            </div>
            
            
            
            
            
        </div>
    </body>
</html>

DragonX · #2 (**permalink**) 26/09/2014, 05:17

Solucion 1

Código CSS:

Ver original.row {
    display: table;
}
 
[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

http://jsfiddle.net/nV3Ua/2/

Solucion 2

Código CSS:

Ver original.row{
    overflow: hidden; 
}
 
[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

http://www.bootply.com/112728

Espero te sirva, un abrazo