CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
user1887577
user1887577

Reputation: 41

Responsive designed bootstrap - stacking of nested columns

I have a problem with Twitter Bootstrap:

I'm trying to do a responsive layout, and I have a 2 columns fluid row with a 2 nested columns in each column (first example in an image).

When I try to resize the browser to pretend it is a smaller-screened device, at some resolutions nested columns are stacked vertically (second example in the image), even though there is enough room for those nested columns to be placed horizontally, and not vertically (third example in an image).

What should I do to prevent nested columns from vertical stacking, when there is enough space for them to place them horizontally?

Here is a jsfiddle.

and image is as followingenter image description here

<div class="container">
<div class="row-fluid">
    <div class="span6">
        6
        <ul class="row-fluid">
            <li class="span6">
                3
            </li>
            <li class="span6">
                3
            </li>
        </ul>
    </div>
    <div class="span6">
        6
                    <ul class="row-fluid">
            <li class="span6">
                3
            </li>
            <li class="span6">
                3
            </li>
        </ul>

    </div>
</div>

​

I didn't find any solution for this problem, so I would be grateful for any help!

Upvotes: 3

Views: 1860

Answers (1)

user1887577
user1887577

Reputation: 41

Ok, I've solved the problem. For those resolutions I had a problem I've changed li to float: left and width to 49%. Like this:

ul {
    width: 100%;
}

li {
    width: 49%;
    float: left;
}

Probably there should be some way to do this without changing bootstrap/or hardcoding.

Anyway, thanks!

Upvotes: 1

Related Questions