CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
vs-works
vs-works

Reputation: 23

Responsive Columns Collapsing Too Soon

I am using Bootstrap 3 and I want 3 columns to remain responsive throughout different sized (lg -> xs). I am trying to use the grid system with col-xx-4 for each size, but as soon as I get to <992px the column start collapsing on each other.

example can be see here

I want the red, green, and blue columns within the gray box to be always equal 3 columns. Maybe in xs they can collapse, but at least until 768px viewport they should be 3 columns next to each other.

I used col-xs-4 that should keep things horizontal at all times.

excerpt of some of my code:

                <div class="dash-bg">
                  <div class="" style="background: #d5d5d5; height: 500px;">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: red; height: 30px;">
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: blue; height: 30px;">
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: green; height: 30px;">
                    </div>                        
                  </div>
                </div>

Upvotes: 0

Views: 880

Answers (3)

Rahul
Rahul

Reputation: 5774

Well, you should add class "Row" to Header..

Code snippet here : 

<div class="header row">
    <div class="logo pull-left" style="background:black;">
    </div>
    <div class="pull-right" style="margin-top: 6.2%;">
        <ul class="nav nav-pills">
            <li><a href="#">COMPANY<span class="arrow-down glyphicon glyphicon-play"></span></a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>
    <!--
    <div class="navbar-header dropdown">
        <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="dropdown" type="button">              
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>          
            </button>
        <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"></a>
    </div>
    -->
</div>

Defining DOM element row will make sure that the maximum height of any child DOM element will be the maximum height of the parent DOM.

Upvotes: 1

Nibbler
Nibbler

Reputation: 334

I have something similar and i use 

<div class="row">
        <div class="col-md-4">Something</div>
        <div class="col-md-4">Something</div>
        <div class="col-md-4">Something</div>
</div>

You can check an example here

Upvotes: -1

DevlshOne
DevlshOne

Reputation: 8457

Sounds like you need to use a media query OR make your dash-bg {min-width:993px;}

Upvotes: 0

Related Questions