This project is read-only.

Responsive grid columns - not inline

Oct 11, 2013 at 12:48 PM
Edited Oct 11, 2013 at 12:55 PM

First of all, great job on porting Bootstrap over to SharePoint!

Second, while I followed the installation instructions (for publishing / content pages) to the letter, columns for the fluid grid are stacking vertically (as if they were using display:block, rather than floats or inline). This is affecting all of the built in page layouts (orbit, sidebar, etc.). I tried duplicating the "orbit" layout and creating my own (with a main "hero" style column at the top that we were going to place an image carousel into, and three smaller sub blocks in a separate row beneath it for additional content):
<div class="row-fluid">
    <div class="span12">Image Carousel</div>
<div class="row-fluid">
    <div class="span4">Sub Block A</div>
    <div class="span4">Sub Block B</div>
    <div class="span4">Sub Block C</div>
Of course, the block that would contain the carousel, being a full-width span, works OK. The three sub blocks stack vertically (almost as if they were cleared), instead of side-by-side / inline.

I've tried a few fixes for CSS ordering, etc. that I've found under the "Issues" section of this site, and verified using IE's dev tools that the CSS and JS for Bootstrap are indeed loading correctly, but am at a loss to explain why this is happening. I've obviously done something wrong here, but for the life of me can't figure out what.

Any help would be most appreciated. Thanks!

Update: I neglected to mention that we are using SharePoint 2010. In addition, we migrated from WSS 3.0 by attaching the WSS_Content database to SharePoint 2010 and performing the metadata / visual upgrade to the 2010 "look and feel" - just in case that could influence the layout / structure.
Nov 10, 2013 at 4:20 PM
Edited Nov 10, 2013 at 4:26 PM
Please disregard.
Nov 12, 2013 at 9:06 PM

It sounds as though something is overriding the span4 class width styles then. I must assume that a file is not being loaded correctly. Without being able to view your site itself and digging in with Firebug I am not sure why you are seeing this kind of bug.

In general the HTML you provided appears to be fine. I do not believe your problems are related to the migration.

Please let us know if you figure this problem out and what you did to solve it. I am sure others might run into the same problem.