CODEWITHSUNDEEP
jquerytemplatesbackbone.jstwitter-bootstrapunderscore.js
Deeptechtons
Deeptechtons

Reputation: 11125

Grid and Stack based layout with Twitter Bootstrap

Has anyone tried to achieve a Grid, Stack layout in twitter bootstrap in conjunction with Backbone.js Collection ?

Grid to List

Demo: ( Without Bootstrap)

http://vandelaydesign.com/demos/list-grid-view/index.html

List layout was east to achieve with below markup for each model in the collection.

<div class="row">
 <div class="span12">
 </div>
</div>

Grid Layout seems more complicated even when the number of models in a row is set fixed. Assuming I am rendering 4 Models per row here is the required markup

<div class="row">
  <div class="span3"></div>
  <div class="span3"></div>
  <div class="span3"></div>
  <div class="span3"></div>
</div>

Generating the above markup is really hard because i have to wrap 4 div's with class span3 in a <div class="row">.

How do i go about doing this ?

Upvotes: 2

Views: 1839

Answers (1)

anushr
anushr

Reputation: 3400

You'll want to use the CSS pseudo-class :nth-child to achieve this. Here's your HTML:

<div class="row column3">
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
</div>

The only thing changed is the addition of the column3 class. Here's the CSS you'll need:

.column3 > div:nth-child(3n+4) {
    clear: left;
}

This should tell every the element after every 3rd element to clear to the next line giving you a 3-column layout.

Upvotes: 0

Related Questions