Why does bootstrap only have 12 columns by default?

bootstrap can only default to 12 columns because 12 is the least common multiple of the numbers "1, 2, 3, 4, 6", so the 12-column grid system is relatively flexible and supports dividing a row into 1 column, 2 columns, 3 columns, 4 columns, 6 columns.

The operating environment of this tutorial: Windows 7 system, bootstrap3 version, Dell G3 computer.

Why does Bootstrap have 12 columns by default?

I was asked a question today: “Have you ever wondered why Bootstrap has 12 columns by default?” I wonder why the default setting is 12 columns. I vaguely think it’s because the layout is more convenient. Commonly divided into 2 blocks, 3 blocks, and 4 blocks, which can be easily divided.

Since we have a hypothesis, we still need to prove it.

Google search for a while.

Contrary to the question’s parenthetical, Bootstrap was always at 940px wide, and not 960px, even with the original 16 columns. With the switch to 12 columns in Bootstrap 2, we wanted to simplify the overall grid (16 columns is right on the edge of enough granularity) and make it easier to get three columns.

The general meaning is that it was originally 16 columns, but later changed to 12 columns to make it easier to arrange three columns.

Okay, so here comes the question, why was 16 columns designed before?

Go on Google.

16-columns has long been the go-to grid for designers and developers, but we’ve noticed a shift to 12- and 24-columns to offer a more flexible layout. And they’re right for doing so—gridded layouts work best with an odd number of columns (you often see three columns, but four or six are not that popular).

This is a 2011 discussion in Bootstrap's github bug list. The title is asking why 16 columns were used instead of 24 columns. It turns out that there are 24 columns before the 16 columns. Roughly speaking, 16 columns is the first choice for developers and designers, but 12 or 24 columns can be more flexible. Among them, the layout of odd columns is more common. For example, you can often see the layout of three columns.

Here, I don’t know why 16 columns is the first choice for developers and designers. But later I mentioned that the three-column layout is more common, and it is indeed the case. For example, the homepage of CSDN has a three-column layout. It is not very convenient to divide 3:1 or 3:2 with 16 columns.

And 12 is the least common multiple of 1, 2, 3, 4, and 6, so the 12-column grid system is relatively flexible and supports dividing a row into 1 column, 2 columns, 3 columns, 4 columns, and 6 columns. . If you want to support 5 columns, then the least common multiple of 1, 2, 3, 4, and 5 is 60, and the number 60 is obviously too large for the grid system.

Recommended: "

"

The above is the detailed content of Why does bootstrap only have 12 columns by default?. For more information, please follow other related articles on the PHP Chinese website!