How can I keep columns from wrapping into a single column?

Question

I am creating a site using Bootstrap 3.1.1. The body tag has a min-width of 800px.

The data I am attempting to display needs to appear in a grid. It's a representation of a parking lot.

Here is a screenshot of what I am trying to achieve (at least for right now). This is how the data appears when my window is larger than a certain point (I am not sure what width my browser is at when it works/doesn't).

good

and this is (a portion) of what happens when the windows is too small:

bad

Part of the reason this is a fixed width site in the first place is because I need to display this. How can I use bootstrap for it's grid layout, but keep the columns from wrapping?

Here's how I am trying to group the data:

<div class="row" style="width:100%;">
    <div class="col-xs-1"> <!-- a single row, e.g. 392-337 -->
        <div class="col-xs-6 pull-left"> <!-- the numbers on the left hand side, 392-365 -->
            <div class="col-xs-12">
                392
            </div><div class="col-xs-12">
                391
            </div><div class="col-xs-12">
                390
            </div><div class="col-xs-12">
                389
            </div><div class="col-xs-12">
                388
            </div><div class="col-xs-12">
                387
            </div><div class="col-xs-12">
                386
            </div><div class="col-xs-12">
                385
            </div><div class="col-xs-12">
                384
            </div><div class="col-xs-12">
                383
            </div>
        </div><div class="col-xs-6 pull-right"> <!-- numbers on the right hand side, 364-337 -->
            <div class="col-xs-12">
                364
            </div><div class="col-xs-12">
                363
            </div><div class="col-xs-12">
                362
            </div><div class="col-xs-12">
                361
            </div><div class="col-xs-12">
                360
            </div><div class="col-xs-12">
                359
            </div><div class="col-xs-12">
                358
            </div><div class="col-xs-12">
                357
            </div><div class="col-xs-12">
                356
            </div><div class="col-xs-12">
                355
            </div>
        </div>
    </div>
</div>

Dan · Accepted Answer · 2014-07-09 19:54:28Z

2

col-xs-1 won't allow for two wide in the column, it's too skinny. Change div class="col-xs-1" to div class="col-xs-2 col-md-1" or if you want custom widths than add your own custom % widths.

I don't think you need all of the other col-xs-12 either since that is adding extra padding.

Bootply with fixes

Or if you want the columns to be closer together then use col-xs-4 instead of col-xs-6, just make sure you create a new <div class="row"> before moving on to the next column (Bootply with that example here)

Updated HTML:

<div class="row" style="width:100%;">
    <div class="col-xs-2 col-md-1"> <!-- a single row, e.g. 392-337 -->
      <div class="row">
        <div class="col-xs-6"> <!-- the numbers on the left hand side, 392-365 -->
            <div>392</div>
            <div>391</div>
            <div>390</div>
            <div>389</div>
            <div>388</div>
            <div>387</div>
            <div>386</div>
            <div>385</div>
            <div>384</div>
            <div>383</div>
        </div>
        <div class="col-xs-6"> <!-- numbers on the right hand side, 364-337 -->
            <div>364</div>
            <div>363</div>
            <div>362</div>
            <div>361</div>
            <div>360</div>
            <div>359</div>
            <div>358</div>
            <div>357</div>
            <div>356</div>
            <div>355</div>
        </div>
      </div>
    </div>
</div>

edited Jul 9, 2014 at 19:54

answered Jul 9, 2014 at 19:45

Dan

9,4885 gold badges44 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

drewwyatt Over a year ago

Your first example (col-xs-2 col-md-1) works well enough that I feel comfortable moving forward - however. There is a still one brief moment that it still collapses the columns, but it corrects itself when I make the window smaller. Any idea why there is a weird area where it collapses the columns?

drewwyatt Over a year ago

Whoops - I was wrong. I just missed the extra row you added in there. Still having one problem though - anything I can do about my rows totaling more than 12 when col-xs-2 is active? When that is triggered, it wraps the final columns.

Dan Over a year ago

You mean that there are more than 6 columns of col-xs-2? You could try making the fonts smaller, but at a certain point it's going to be so condensed that it won't be worth looking at on a small screen.

Collectives™ on Stack Overflow

How can I keep columns from wrapping into a single column?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related