Column layout via spans

  • Resolved chappie

    (@chappie)


    10 years, 7 months ago

    Just trying to get my head around the column layout snippet and would be grateful for a couple of points of clarification:

    1. How does this work on pages where there is already a sidebar? Does the sidebar take up 3 of the 12 spans, leaving just 9 spans to divide into columns, 3 columns of 3 spans each?

    2. Can I use this multi-column layout inside a div on a page where say the top half is full-width, single column layout plus a sidebar (ie one of the Customizr default layouts) – and the bottom half of the page is a multi-column div containing, say 3 columns, plus the sidebar?

    3. Would I be right in thinking that the individual span divs will always position themselves in the first available position on the left of the page unless an offset is specified? In other words, if I declare 2 x span3 divs in the same row-fluid div, they will automatically position side by side in the left half of the page, assuming it is empty?

    4. Is there any padding automatically applied between span divs or can I position them anywhere I like with CSS?

    5. If I can use CSS and floats to achieve the same result without using the Bootstrap grid system, what are the advantages of the latter?

    Thanks for any help.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Did you see @ef’s recent snippet?

    1. Bootstrap sets up rows into span12 components. So where you have a span3sidebar + span9body, the span9body can be separated into span[x] components up to span12. So in your example you could use 4 x span3 in your body.

    2. Ignore the sidebar, you have a span9 body to play with (in your example). So within that, you can start with a span12div and follow it with a div containing 3xspan4div’s

    3. Correct

    4. The beauty in Bootstrap is that it adjusts the widths (margin/padding) of each span[x] using %width, so it works independent on any screensize – hence its’ strength in responsive pages using row-fluid. You can override the CSS but you may effect the page, so try working with the different span[x] offset[y] components.

    5. Once you use it, you’ll see just how much easier it is to use rather than adjusting float, margin, padding etc.

    Thread Starter chappie

    (@chappie)

    Thank you, Dave – that’s extremely helpful.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Column layout via spans’ is closed to new replies.