CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
TheWebs
TheWebs

Reputation: 12923

Twitter Bootstrap Responsive issue with span4 tags

I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.

Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?

Upvotes: 0

Views: 892

Answers (1)

David Spence
David Spence

Reputation: 8079

Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.

From Bootstrap homepage

"The default Bootstrap grid system utilizes 12 columns"

So the total of your spans must add to 12 per row. ie.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
<div class="row">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>
<div class="row">
  <div class="span7">...</div>
  <div class="span3 offset2">...</div>
</div>

Upvotes: 1

Related Questions