-1

I use the bootstrap grid layout to render columns dynamically .

Here is the logic that i use

If there are N number of controls columns to be rendered for each row. The col-lg-{} number is decided based on the result (number of controls) /12 .

For example : if there are 6 controls then 12/6 each col attribute will then contain col-lg-2 ,col-md-2 col-sm-2 etc.

Sample of a bootstrap "row" here .

Now the problem here is if i resize the window the controls in row tend to reduce its width and shrink by its width !!. Instead i want the controls that dont fit in the row to move down below ?

Any suggestion as to how to go about this ? Please Let me know if the question is not clear ?.

Community
  • 1
  • 1
user581157
  • 1,327
  • 4
  • 26
  • 64
  • If you use more than 12 columns per row, then the extra columns will wrap onto the next line. Sounds like that's what you're looking for? – cvrebert Aug 13 '14 at 22:20

2 Answers2

3

it may be the order of the classes in your divs. Try this bootply instead: http://www.bootply.com/j5Qoftk2ny

here's what the html looks like:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6">One</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Two</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Three</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Four</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Five</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Six</div>
  </div>
</div>
Jeremy Danyow
  • 26,470
  • 12
  • 87
  • 133
  • 1
    Class order in element does not affect class styles apply – Rakhat Aug 13 '14 at 12:27
  • most of the time no, but it can: http://stackoverflow.com/a/15672815/725866. probably not the culprit here but i can't explain why mine works and his doesnt- maybe because I have a container div? – Jeremy Danyow Aug 13 '14 at 12:29
  • It seems your solution is right, but I don't understand what you mean about order of classes. The issue seems to be that OP's columns are all the same # - i.e. col-sm-2 col-md-2 col-lg-2. – Shawn Taylor Aug 13 '14 at 22:53
  • Yes, his columns are all the same, lg, sm, and md use exactly the same percentages. Plus he also forgot the container which fixes the math on the row. – Christina Aug 14 '14 at 03:07
0

Each row renders controls (columns) with different number of controls.

So the first row can have 3 controls and the 2nd row could have 6 controls . These controls are set by the user.

So the challenge here was what should the layout be in the above case .

Current implementation decides based on the browser width , which control stays on the row and what falls down .

I render the div column with the display set to inline-block .

style="display:inline-block"

So now based on the browser width and whether a column could fit in the control will be rendered, if not the column control will be displayed below.

This display property is used without bootstrap changes.

user581157
  • 1,327
  • 4
  • 26
  • 64