Sign in Register
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
    Kevin John
    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
    J
    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
    Mark Bennett
    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
    Kevin John
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies