Check the individual width of your elements. What I think it might cause the behavior you're explaining here is the width of each individual element is probably wider than the predetermined width of the columns of the grid. Lets say on a viewport width of 480px (small phone which is covered by the * "col-xs-**" class), the grid width is a total of 12 columns. So 480px / 12 = 40px. So each columns are 40px wide in a 480px width viewport. If you set an element that is 50px wide in a columns that is 40px wide, it will push left the elements of the other columns but the columns are still set to their predetermined width, which in this example is 40px.
You have to remember to make the elements within columns to be fluid so they adapt to the width of the columns. (most of the time you'll want to set the width of the elements to 100%) On Saturday, August 24, 2013 5:37:44 AM UTC-4, Kamal wrote: > > Hi, > > I am facing issues with responsive design in BS 3.0. I am trying to handle > them same gird in all there screens sizes (Desktop [xs], Tablet [md], > Mobile [sm], for my surprise it not working when i have resized the window > to a smaller size. I have tried it in the same way as the documentation > example with all the three col-xx in the class for a *div*. I was wonder > whats was going wrong and have tried re-sizing my window with BS Docs > example it self, to my surprise its the same there. Plz find the screen > shots below > > > <div class="row"> >> <div class="col-xs-1 col-md-1 hidden-sm"><h4>#</h4></div> >> <div class="col-xs-1 col-md-1 hidden-sm"><img >> src="holder.js/64x64"></div> >> <div class="col-xs-8 col-md-6 col-sm-12">OO<br/><spawn >> class="title">Description</spawn></div> >> <div class="col-xs-1 col-md-2 col-sm-8"><input class="pull-right >> form-control" type="number" name="quantity" min="1" max="99" size="4"></div> >> <div class="col-xs-1 col-md-1 col-sm-4"> <i class="icon-remove >> pull-right" style="font-size: 3em;"></i></div> >> </div> >> > > > The first row for mobile has 8, 4. But is not setting it in one row, its > still taking 12 & 4 from .col-xs. Its the same with the second row also. > Can some one Plz help me out here to identify what am i doing wrong. > > > <https://lh5.googleusercontent.com/-qXd0oQKpu1E/Uhh7WGlQYEI/AAAAAAAAAjE/51a-LZxAA3M/s1600/CSS+%C2%B7+Bootstrap+-+Mozilla+Firefox_002.png> > -- You received this message because you are subscribed to the Google Groups "twitter-bootstrap" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
