dynamic 'thumbnails' to wrap to new row automatically in razor script

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Kevin John 8 posts 28 karma points

Oct 16, 2012 @ 17:12

0

Dynamic 'thumbnails' to wrap to new row automatically in Razor script

Hi. I am using the new Bootstrap Version 2.1.1. I am using a Razor macro to create dynamic 'thumbnails' (with associated description) and I would like 4 in each row - any new ones would then wrap to a new row automatically. For example if I have 5 thumbnails I would like one row of 4 and the next row of 1.

At the moment, using my code below, the last thumbnail does not get placed in a new row, but instead gets placed underneath the 3rd column i.e. it's not getting placed in it's own new row. Any ideas how to achieve a new row automatically?

Thanks in advance.

Kevin

PS I am using the CSS for the Bootstrap thumbnails grid here:

http://twitter.github.com/bootstrap/components.html#thumbnails

===============================================

RAZOR MACRO SCRIPT

@inherits umbraco.MacroEngines.DynamicNodeContext


<ul class="thumbnails">

@foreach (var item in Model.Children.Where("umbracoNaviHide != true").OrderBy("UpdateDate"))
{

<li class="span3">
<div class="thumbnail">

    <h2><a href="@item.Url">@item.Name</a></h2>

   @item.widgetmodelDescription


    </div>
</li>

}

</ul>

Copy Link
J 150 posts 489 karma points

Oct 16, 2012 @ 17:44

0

Hi Kevin,

I'm afraid I cannot help you at the moment as I've only played around with Twitter Bootstrap verison 2.0.4.

Thanks,

J

Copy Link
Mark Bennett 199 posts 375 karma points

Oct 16, 2012 @ 18:10

0

Kevin,

Do you have a site setup where I can take a look at what you're doing? I would imagine something going screwy with the flow....maybe something like this is happening --> https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/-F5R180ChAo

Mark.

Copy Link
Kevin John 8 posts 28 karma points

Oct 17, 2012 @ 15:10
0
Hi Mark

Thanks. I am using 4 columns for the thumbnails and managed to fix it using the following in the 'thumbnails.less' file in Bootstrap:
```
.thumbnails .span3:nth-child(5)  {
margin-left: 0;
clear: left;
}
```
The margin-left: 0 was necessary in my fluid layout, otherwise it displays with an indented default left margin.

Cheers

Kevin
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?