CODEWITHSUNDEEP
cssangularjstwitter-bootstraptwitter-bootstrap-3
pgarciacamou
pgarciacamou

Reputation: 1732

Bootstrap 3 grid system more than 12 cols doesn't drop to a new row

I don't know if I'm wrong but it used to be that if you had bootstrap-columns that added to more than 12 (default value) the rest would drop to a new "row". I'm now using Bootstrap 3.x So in theory having this:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-4">1</div>
  <div class="col-xs-4">2</div>
  <div class="col-xs-4">3</div>
  <div class="col-xs-4">1</div>
  <div class="col-xs-4">2</div>
  <div class="col-xs-4">3</div>
</div>

Would be essentially the same as having this:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-4">1</div>
  <div class="col-xs-4">2</div>
  <div class="col-xs-4">3</div>
</div>
<div class="row"> <!-- This would seem to 'drop' into a new row -->
  <div class="col-xs-4">1</div>
  <div class="col-xs-4">2</div>
  <div class="col-xs-4">3</div>
</div>

I'm using AngularJS v1.3.x to create multiple columns of 4 expecting them to be align in different rows:

<div class="row">
    <div class="col-xs-4" ng-repeat="item in ['Lorem Ipsum..', 1, 2, 3...]">{{item}}</div>
</div>

but as the height of each column differs (i.e. 'Lorem Ipsum..' and single numbers). You can see what happens in this plunker. Instead of having the next 12 drop to a new row, they "overlap" somehow, making it look good UNTIL there is a gap. What I want is to actually drop to a new row every 12.

Is this happening for any specific reason? And how can I use Angular in a way to add a row every total of 12 (3 x col-xs-4 = 12). As extra information: the array is dynamic, it will never hold the same amount of items at one time, meaning that I can't hard code it.

Any ideas are greatly appreciated, thanks!

Upvotes: 2

Views: 1159

Answers (1)

cvrebert
cvrebert

Reputation: 9279

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Basically, it comes down to how floats work in CSS/HTML, in particular when the items being floated are of differing heights. And Bootstrap's grid is implemented using floats, so this floating issue affects it.

Example for your particular case:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
    <div class="clearfix"></div>
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
</div>

Upvotes: 4

Related Questions