twitter bootstrap - examples - Diseño de estilo Pinterest(Bootstrap 3+Masonary)*tweeks finales*
layout bootstrap (2)
¿Hay una razón particular por la que necesitas usar col-lg- *? Porque las clases col-lg- * tratan los elementos para los tamaños de pantalla grandes. Puede usar las otras clases que bootstrap 3 proporciona como col-md- , col-sm- y col-xs- * para especificar exactamente cuántas columnas desea en diferentes tamaños de puerto de visualización. Entonces, si quieres que tu div sea de 4 columnas de ancho en pantallas grandes, asigna col-lg-4 y si quieres que sea 6 columnas en pantallas de tamaño mediano, entonces asignarías clase col-md-6 al mismo div . Algo como esto:
<div class="col-lg-4 col-md-6">
</div>
y, por supuesto, puede usar las clases de extracción y extracción para mover sus columnas. La documentación de Bootstrap resume esto en una tabla. Espero que ayude porque no sé exactamente por qué solo necesitas usar col-lg-4.
Estoy construyendo un sitio que necesita una página de inicio de estilo pinterest. (pero solo 3 columnas de ancho colapsan hasta 2 y luego 1 columna usando la clase de arranque col-lg-4).
He buscado y encontré muchas opciones de cómo hacer esto. Sin embargo,
No deseo especificar el ancho de las columnas en mi CSS (quiero que herede los anchos de las columnas de arranque)
No quiero usar el nuevo diseño de columna css3 (por falta de soporte de navegador anterior)
No quiero hacerlo en PHP ya que se acumula en el orden incorrecto.
He adaptado un código tomado de https://gist.github.com/justincarroll/5959773 que utiliza mampostería para empujar los bloques y estar bastante cerca de lo que quiero, excepto que cuando se acumula, no parece funciona tan bien como la pila de bootstrap row + col span normal.
Me gustaría que se acumulara tan bien como el bootstrap se pueda apilar (aumentando y disminuyendo dinámicamente el tamaño de la columna) y me gustaría centrar el contenido en el centro (actualmente se apila y empuja todos los cuadros a la izquierda en los más pequeños). pantallas).
No estoy preocupado acerca de cómo realmente estilizar las cajas ... eso no forma parte del alcance de esta pregunta, solo necesito ayuda sobre cómo empujar / tirar de las cajas para que funcionen bien y cambien de tamaño correctamente.
Soy un novato con css y js, así que si tiene alguna sugerencia sobre cómo mejorar este código, por favor hágamelo saber.
Ps: en mi violín no parece bajar a 2 columnas, pero en mi anfitrión local conseguí que funcionara ... no estoy seguro de dónde lo arruiné.
Juega con él aquí: http://jsfiddle.net/rDdcT/
Código debajo
<body>
<div class="container">
<div id="pin-outer">
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">
<p class="post-title">Title One</p>
<p class="post-snippet">
This is a post about title one.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=TWO" class="img-responsive">
<p class="post-title">Title TWO</p>
<p class="post-snippet">
This is a post about title two.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=THREE" class="img-responsive">
<p class="post-title">Title three</p>
<p class="post-snippet">
This is a post about title three.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">
<p class="post-title">Title Four</p>
<p class="post-snippet">
This is a post about title four.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=FIVE" class="img-responsive">
<p class="post-title">Title five</p>
<p class="post-snippet">
This is a post about title five.
</p>
</a>
</div>
</div>
</div>
</body>
JS
//mutated from https://gist.github.com/justincarroll/5959773
// Load is used to ensure all images have been loaded, impossible with document
jQuery(window).load(function () {
// Takes the gutter width from the bottom margin of .pin-inner
var gutter = parseInt(jQuery(''.pin-inner'').css(''marginBottom''));
var container = jQuery(''#pin-outer'');
// Creates an instance of Masonry on #pin-outer
container.masonry({
gutter: gutter,
itemSelector: ''.pin-inner'',
columnWidth: ''.pin-inner''
});
// This code fires every time a user resizes the screen and only affects .pin-inner elements
// whose parent class is .container-fluid. Triggers resize so nothing looks weird.
jQuery(window).bind(''resize'', function () {
if (jQuery(''#pin-outer'').parent().hasClass(''container-fluid'')) {
// Resets all widths to ''auto'' to sterilize calculations
post_width = jQuery(''.pin-inner'').width() + gutter;
jQuery(''.container-fluid #pin-outer, body > .container-fluid'').css(''width'', ''auto'');
// Calculates how many .pin-inner elements will actually fit per row. Could this code be cleaner?
pin - outer_per_row = jQuery(''#pin-outer'').innerWidth() / post_width;
floor_pin - outer_width = (Math.floor(pin - outer_per_row) * post_width) - gutter;
ceil_pin - outer_width = (Math.ceil(pin - outer_per_row) * post_width) - gutter;
pin - outer_width = (ceil_pin - outer_width > jQuery(''#pin-outer'').innerWidth()) ? floor_pin - outer_width : ceil_pin - outer_width;
if (pin - outer_width == jQuery(''.pin-inner'').width()) pin - outer_width = ''100%'';
// Ensures that all top-level .container-fluid elements have equal width and stay centered
jQuery(''.container-fluid #pin-outer, body > .container-fluid'').css(''width'', pin - outer_width);
jQuery(''body > .container-fluid'').css({
''margin'': ''0 auto''
});
}
}).trigger(''resize'');
});
CSS
.pin {
margin: 0 0 50px;
text-align: left;
width: 330px;
}
.pin img {
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font-size : 12px;
color: #333;
margin: 0;
text-decoration: none;
}
.pin:hover {
opacity: 0.4;
text-decoration: none;
}
HTML
<div class="container container-fluid">
CSS
.pin {
margin: 0 0 0px;
text-align: left;
width: auto;
}
Esto le permitirá decidir cuántas columnas quiere con la clase bootstrap col-md. Utilice col-md-3 para cuadrícula de cuatro columnas y col-md-4 para cuadrícula de 3 columnas.