Home > Web Front-end > CSS Tutorial > Why Are My Bootstrap XS Columns Not Wrapping on Small Screens?

Why Are My Bootstrap XS Columns Not Wrapping on Small Screens?

Barbara Streisand
Release: 2024-10-31 03:46:01
Original
661 people have browsed it

Why Are My Bootstrap XS Columns Not Wrapping on Small Screens?

Bootstrap XS Columns Wrapping Issue

Question:

Small screen XS columns in Bootstrap aren't wrapping as expected when adding up to 12 units and decreasing screen width.

Answer:

Bootstrap has a known issue regarding this behavior. On very small screens (less than 360px), the col-xs-1 columns start to wrap prematurely due to a mismatch between column width and padding.

This can be avoided by avoiding col-xs-1 on extremely small screens. Consider if the screen size will realistically be resized below 360px. In many cases, it won't.

Note for Bootstrap 4:

Col-xs-1 has been renamed to col-1 in Bootstrap 4.

Related Issue:

  • Bootstrap grid breaks in smallest size

The above is the detailed content of Why Are My Bootstrap XS Columns Not Wrapping on Small Screens?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template