0

I must code an html viewer which take some objects as input and provides a nice html layout. For the layout part I decided to use twitter bootstrap 2.3

prerequisites

  • The objects are represented as divs of different size
  • I don't know the number of divs to display in advance

Now, what I want is an "auto-adjusting" layout able to displace in the most convenient way the object in the screen. The concept is sketched in the following image:

enter image description here

on the left you can see the objects, on the right the desired final diplacement. I nearly get it work in this way:

<div class="row-fluid">
    <div class="node span6">a box</div>
    <div class="node span6">a second box</div>
    <div class="node span6">a third box</div>
    <!--as much divs as you want-->
</div>

but in the second line I get a bad "tilted-right" effect due to the margin-left settings of the bootstrap css.

enter image description here

I also tried to override the css specification of the span to adopt a margin-right driven approach but with no luck (if it is interesting I can provide info about this approach). Any suggestions?

MaVVamaldo
  • 2,505
  • 7
  • 28
  • 50
  • 1
    You are not using bootstrap correctly. The grid is made up of 12 elements so if you use `span6` for a div you can only use one more or two `span3`s. – slash197 Aug 06 '13 at 16:07
  • True that. If memory serves, what you've described is what you'll see if you use Bootstrap as it was intended. – isherwood Aug 06 '13 at 16:09
  • well, You're right. But according to bootstrap guidelines, I need to include in a `row` class a number of `spanX` classes that sum up to 12. This imply I know how to arrange the content in advance (i.e. I know where a `row`starts and ends). This is **not my case**. I'd like to add a bunch of divs in some sort of container and let them adjust automatically. – MaVVamaldo Aug 06 '13 at 17:14
  • Bootstrap is intended for static layouts or layouts in which you know the amount of content before rendering it. It doesn't really suit your needs. I suggest checking out Masonry (http://masonry.desandro.com/) or another JS library like it to handle a dynamic layout like you want. – Ross Allen Aug 06 '13 at 20:32
  • Thank you for the hint, I'll check the Masonry capabilities. – MaVVamaldo Aug 07 '13 at 06:52

1 Answers1

1

You can do this by using bootstrap and the :nth-child pseudo selector. However, this that you are trying to accomplish will also require that you make CSS changes beyond the simply .span's left margin... You will probably need to re adjust this with smaller @media queries and it's probably outside the scope of this question to show you how to do all that, however... this should get you going:

Here is a jsFiddle

The fiddle above has bootstrap loaded... I'm making a container with the class .row-fluid in which I'm adding many .span6's, but I am also making sure that on the third and then every two more .span6 it's removing the left margin so it stacks two and two .span6 per row.

You can read more about the :nth-child pseudo selector here

sulfureous
  • 1,526
  • 1
  • 14
  • 22
  • your solution is effective (and also elegant) when I have `divs` of omogeneous size, but when the size is different it doesn't solve the problem. I reproduced the issue in [jsFiddle](http://jsfiddle.net/LdPDr/1/), you can check yourself. – MaVVamaldo Aug 07 '13 at 06:51
  • Hi @maVVamaldo this is simply because the floats are not being cleared The div with content is pretty long and the div next to it is fine (#4) but then #5 starts right below the #4 but without the margin on the left. So that's how you get what you see in your fiddle. The only way I can think of is to wrap every two spans in a row. Here is a fiddle. http://jsfiddle.net/sulfureous/VutLp/ Understanding this should get you in a better position to make the right choice on what to do... Let me know if it solves your issue to add it to my main answer. – sulfureous Aug 07 '13 at 11:11
  • hi @sulfureous, thank you for your suggestions. Despite it is a better arrangement, it is not the expected result. It would be great to have what you see in the first figure (first row) of my question. In other words, in [your example](http://jsfiddle.net/sulfureous/VutLp/) the divs 5 and 6 should position beneath the div 4 and on the right side of the large div. I manage to get some results by setting the `margin-left: 0px;` property for all the spans and removing the border for a nicer look, but I don't consider it a solution, just a workaround. – MaVVamaldo Aug 07 '13 at 11:56
  • 1
    You will need jQuery or JS as @ssorallen suggested. If JavaScript is an option then you can checkout the Masonry plugin by "Desandro". http://masonry.desandro.com/ - Here is another question dealing with an issue that you will face while doing this with a fluid grid: http://stackoverflow.com/questions/8446061/jquery-masonry-with-percentage-width – sulfureous Aug 07 '13 at 12:10