Incorrect wrapping of XS blocks

[ime111]

See the screenshot: I thougt that these blocks must be in one row, but they are not. Why? XS layout must have 12-rows grid too.

[juthilo]

This looks like the docs, is that correct? Please indicate where exactly you took these screenshots.

[mdo]

Also, browser and version? OS? Link to jsbin or jsfiddle if not in the docs?

[ime111]

OS: Windows 7
Browser: Chrome 27

juthilo, I have changed some classes on offitial site to check behavior. It is equal to placement this code to my site.

[juthilo]

For easier debugging, could you place the code you use on your site in a jsfiddle or jsbin, please?
Or do you still now which exact example from the docs you tested this on?

Also, Chrome for Windows' latest version is 29, are you not able to update the browser for some reason?

[ime111]

JSFiddle: http://jsfiddle.net/b4b3j/1/
Screenshot: http://i.imgur.com/VrAnlPJ.png

I am unable to update browser now, if it is needed, shall do it later.

[juthilo]

I can reproduce this only when the viewport's width is very small, so I'm not sure if there's anything we can do here. I'll leave this open for @mdo.

[cvrebert]

We might need to add a "Required minimum viewport width" to the docs.

[ime111]

I think many of mobile devices have width <= 330 px (the resolution from which the bug appears). So it can hardy be a feature.

Example of not very old, Android 4.x mobile with 320 px resolution: http://en.wikipedia.org/wiki/Sony_Xperia_Go

[cvrebert]

These docs and this SO entry suggest that 240x320 physical px is the de facto minimum Android screen size. (Although this neglects market share considerations, etc.)

[cvrebert]

By virtue of the column gutter width (and confirmed by experimenting), 360px seems to be Bootstrap's current minimum width, below which the unwanted wrapping is observed.

[mdo]

There are two reasons this happens:

• You're using completely unrealistic grid columns—there is no reason to be using 11 and 1 at that width.
• The browser is having trouble computing (and perhaps rounding?) the percent widths of the columns. Could also be a mix of the negative margins and padding we use for our grids that's adding to that.

A layout with two 6 columns works perfectly, as does 8 and 4. I'm inclined not to add anything to the docs that documents a required viewport width given this particular situation.

Is there another situation in which this incorrect wrapping happens that might be more common?

[mdo]

Coming back to this, closing as a won't fix—this example isn't in our docs and I really cannot imagine why this exact problem would be used.

[ime111]

mdo, I am surprised you have closed the bug.
The main Bootstrap feature is to show the elements in a 12 columns grid. The use case of this code it to show one column with 11/12 of width and one with 1/12 width. Obviosly.
If it is might not be used, Bootstrap should be 4 colums system I think.

[zlatanvasovic]

I have an better idea for grid in v4, so wait until that. I think your problem can be fixed with using percents instead of pixels for padding, margins, and container size.