1

As the title says, I am using the twitter Bootstrap CSS scaffolding system to set up columns using the fluid grid system. I would like these columns to remain a fixed width on resize of the browser (I have things within these columns that get "smooshed" together when the browser shrinks). How would I do this? Here is the basic code that I am using: 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
        </div>
        <div class="span4" style="background-color: white;">
        </div>
        <div class="span4" style="background-color: white;">
            <div class="row-fluid">
                <div class="span6">
                </div>
                <div class="span6">
                </div>
            </div>
        </div>
        <div class="span2">
        </div>
    </div>
</div>
PiLHA
  • 2,326
  • 1
  • 24
  • 32
user1072337
  • 12,615
  • 37
  • 116
  • 195
  • 1
    To clarify, you want a fluid container but fixed column widths? If so you may want to try `display: inline-block` – pk-nb Jun 07 '13 at 16:42
  • 1
    Just be aware that the bootstrap may have all kinds of styling that may interfere. Floats, fluid container... etc. You may want to avoid the twitter bootstrap for the main layout. Maybe first make a site skeleton first and then integrate the bootstrap styles. – pk-nb Jun 07 '13 at 16:56
  • this didn't solve the issue. I want the columns to remain the same pixel size as the browser is resized. – user1072337 Jun 07 '13 at 17:06
  • 1
    Actually, that's a good use case for inline-block. Here's a [fiddle](http://jsfiddle.net/d497H/2/) I made: You can try it out. Floats could work too. Here's a [good overview](http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/). – pk-nb Jun 07 '13 at 17:16

2 Answers2

0

I believe you should change the position of the divs, you want to stay fixed, to absolute or fixed.

Bill
  • 16
  • 4
0

Maybe you want some columns fixed with fluid container? If so you can try this: https://stackoverflow.com/a/22471138/1252528

UPDATE: I think you don't need use bootstrap to layout, just add display: table to the container div and display: table-cell to the span element which you want to set fixed width can archive that.

Community
  • 1
  • 1
John Xiao
  • 1,680
  • 2
  • 18
  • 24